如何在 Donut Legend 中显示 C3.js 中的值？

Question

这里有一个简单的示例屏幕截图，您可以在其中看到圆环图。

是否可以在图表的图例中显示真实值（而不是百分比计算值），如屏幕截图中用红色箭头标记的那样？

每个人在观看图像时都想知道“22.7% 的内容”，那么是否有任何解决方案可以显示数据行的总和（就像我在屏幕截图中伪造的 - 箭头）或者完整的总和所有数据行？

此致，

弗洛里安

Answer 1

您可以使用 D3 选择器手动 edit/adjust 图例文本，如下例所示。但是，根据您将其更改为的文本，您可能还必须修改标签的 size/positioning，即进一步进行 D3 操作。但只是为了进行基本更改，请参阅代码示例。

当然，您也可以在生成图表之前设置系列的名称（数组的第零项），这样就不需要任何 D3 操作。我在下面的第二个 series/column 中完成了此操作。

var cols = [
            ['data1', 30],
            ['data2', 120],
        ];
  
cols[1][0] = "Category C: " + cols[1][1];
  
var chart = c3.generate({
    data: {
        columns: cols,
        type : 'donut'
    },
    donut: {
        title: "Iris Petal Width"
    }
    
});
          
d3.selectAll(".c3-legend-item-data1 text").text("Changed")

<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='chart' />

如何在 Donut Legend 中显示 C3.js 中的值？

How to show values in C3.js in Donut Legend?

javascript

charts

d3.js

c3