我无法修复c3js中的甜甜圈大小。每当图例中的标签数量和标签长度增加时,我需要增加图表大小以适应它们。但这会影响其他图表,而图例中的标签数量较少。为了保持一致,我对页面中显示的所有圆环图使用相同的图表大小。但根据传奇标签,甜甜圈的大小各不相同,看起来不太好。有关如何修复甜甜圈大小的任何建议,无论图例标签如何。我正在使用填充将图例放在图表的右侧。
您可以在下面找到生成图表的代码:
<c3chart bindto-id={{id}} chart-data="piePoints" chart-columns="pieColumns" padding-left="0" padding-right="300" padding-top="0" padding-bottom="0">
<chart-size chart-width="400" chart-height="300" />
<chart-donut width="40" expand="false" show-label="true"></chart-donut>
<chart-legend show-legend="true" legend-position="right" />
<chart-tooltip show-tooltip="false"/>
</c3chart>
在下面的小提琴中,我有3个由c3js生成的图表。我想修改图表的大小,但可以看出甜甜圈的大小因图例而异。
https://jsfiddle.net/anu23/qzew784d/2/
无论图例标签长度和图例中的标签数量是多少,都能保持圆环尺寸固定。