这是一个简单的示例屏幕截图,您可以在其中看到一个圆环图。
是否可以在图表的图例中显示实际值(不是计算的百分比),如屏幕截图中用红色箭头标记的那样?
在观看图像时,每个人都想知道“什么的 22.7%”,那么有没有任何解决方案可以显示数据行的总和(就像我在屏幕截图中伪造的 - 箭头一样),或者可能是所有数据的完整总和 -行?
问候,
弗洛里安
这是一个简单的示例屏幕截图,您可以在其中看到一个圆环图。
是否可以在图表的图例中显示实际值(不是计算的百分比),如屏幕截图中用红色箭头标记的那样?
在观看图像时,每个人都想知道“什么的 22.7%”,那么有没有任何解决方案可以显示数据行的总和(就像我在屏幕截图中伪造的 - 箭头一样),或者可能是所有数据的完整总和 -行?
问候,
弗洛里安
您可以使用 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' />