Kob*_*oba 4 javascript d3.js crossfilter dc.js
我有一个饼图,我想为标签添加百分比.这是饼图的jsfiddle,代码如下.现在图表显示了实际值.我查看了dc.js入门指南和操作指南,它是仪表板的一个示例.它的图表中有百分比.但是,当我尝试复制结构时,我收到一个错误.例如,当我像这样使用标签功能时
.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) 会给你的切片显示弧度的数量,因此你可以通过弧度转了一圈数除以从那里计算百分比.
| 归档时间： |
|
| 查看次数： |
5100 次 |
| 最近记录： |