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

Posted 2023-02-22

【中文标题】如何在 Donut Legend 的 C3.js 中显示值？

【英文标题】：How to show values in C3.js in Donut Legend?

【发布时间】：2015-08-09 18:17:27

【问题描述】：

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

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

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

问候，

弗洛里安

【参考方案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' />