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

Question

这里有一个简单的示例屏幕截图，您可以在其中查看甜甜圈图。

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

每个人都希望在观看图像时知道“ 22.7％”，因此是否有任何解决方案可以显示数据行的总和（例如我在屏幕快照中伪造的箭头），或者显示所有数据的总和-行？

问候，

弗洛里安

Answer 1

您可以使用D3选择器手动编辑/调整图例的文本，如下例所示。但是，根据您将其更改为的文本，您可能也必须修改它们的大小/标签位置，即进一步进行D3操作。但是只是做一个基本的更改，请参见代码示例。

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

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' />