我有一个饼图，我想为其标签添加百分比。这是一个jsfiddle饼图和代码如下。现在图表显示实际值。我看着 dc.js Getting Started and How-To Guide这是仪表板的一个例子。它在标签中包含带有百分比的图表。但是，当我尝试复制结构时出现错误。例如，当我像这样使用标签功能时
.label(function(d) {if(all.value){return d.key + " " + d.value / all.value();}
.renderLabel(true)
在控制台中它说所有的都没有定义。此外，d.key 也不返回任何内容。我想我的数据有不同的结构。帮助表示赞赏。谢谢。
HTML
<body>
<div id='Chart'>
</div>
</body>
JS
var ndx = crossfilter(data);
var XDimension = ndx.dimension(function (d) {
return d.Category;
});
var YDimension = XDimension.group();
dc.pieChart("#Chart")
.width(480).height(300)
.dimension(XDimension)
.group(YDimension)
.label(function(d){return d.value});
dc.renderAll();
数据
var data = [{
Category: "A",
ID: "1"
}, {
Category: "A",
ID: "1"
}, {
Category: "A",
ID: "1"
}, {
Category: "A",
ID: "2"
}, {
Category: "A",
ID: "2"
}, {
Category: "B",
ID: "1"
}, {
Category: "B",
ID: "1"
}, {
Category: "B",
ID: "1"
}, {
Category: "B",
ID: "2"
}, {
Category: "B",
ID: "3"
}, {
Category: "B",
ID: "3"
}, {
Category: "B",
ID: "3"
}, {
Category: "B",
ID: "4"
}, {
Category: "C",
ID: "1"
}, {
Category: "C",
ID: "2"
}, {
Category: "C",
ID: "3"
}, {
Category: "C",
ID: "4"
}, {
Category: "C",
ID: "4"
},{
Category: "C",
ID: "5"
}];
最佳答案
你很接近!在这种情况下，我建议您执行以下操作:
.label(function(d) {
console.log(JSON.stringify(d));
})
了解您的数据结构。如果你这样做，你会看到 key 和 value 在 d.data 下，所以你可以有一个像
.label(function(d) {
return d.data.key + ' ' + d.data.value + '%';
})
如果您只想计算显示的圆的分数，您可以使用 startAngle 和 endAngle 属性。
.label(function(d) {
return d.data.key + ' ' + Math.round((d.endAngle - d.startAngle) / Math.PI * 50) + '%';
});
(d.endAngle - d.startAngle) 将为您提供切片显示的弧度数，因此您可以从那里除以圆中的弧度数来计算百分比。
关于javascript - 在 dc.js 中为饼图标签添加百分比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25209971/