如何在甜甜圈传奇中显示C3.js中的值？

Question

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

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

每个人都想知道＆＃34; 22.7％的什么＆＃34;在观看图像的时候，是否有任何解决方案可以显示数据行的总和（比如我在屏幕截图 - 箭头中伪造）或者可能是所有数据行的完整总和？

此致

Florian

Answer 1

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

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

＆＃13;

＆＃13;

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")

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;