将百分比添加到dc.js中的饼图标签 [英] Add percentages to the pie chart label in dc.js
问题描述
我有一个饼形图，我想为该标签添加百分比。以下是饼图的 jsfiddle ，代码如下。现在图表显示实际值。我查看了 dc.js入门和操作指南 （这是仪表板的示例）。它有在标签百分比的图表。然而，当我尝试复制的结构，我得到一个错误。例如，当我使用标签函数像这样
.label（function（d）{if（all.value）{ return d.key ++ d.value / all.value（）;}
.renderLabel（true）
在控制台它说，所有未定义。另外， d.key 不返回任何东西，我猜我的数据有不同的结构
< 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 ）
.group（YDimension）
.label（function（d）{return d.value}）;
dc.renderAll（）;
数据
var data = [{
Category：A，
ID：1
}，{
Category：A，
ID ：1
}，{
类别：A，
ID：1
}，{
类别：A，
ID：2
}，{
类别：A，
ID：2
}，{
类别：B b $ b ID：1
}，{
类别：B，
ID：1
}，{
类别：B ，
ID：1
}，{
类别：B，
ID：2
}，{
类别： B，
ID：3
}，{
类别：B，
ID：3
}，{
：B，
ID：3
}，{
类别：B，
ID：4
}，{
类别：C，
ID：1
}，{
类别：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））;
}）
感觉你的数据的结构。如果这样做，您会看到
键和value在d.data，因此您可以使用.label（function（d）{
return d.data.key +''+ d.data.value +'％';
}）
b $ b如果你只是想计算显示的圆的分数，可以使用
startAngle和endAngle属性。.label（function（d）{
return d.data.key + + Math.round（（d.endAngle - d.startAngle）/ Math.PI * 50）+'％';
}）;
（d.endAngle - d.startAngle）将给出切片显示的弧度数，因此您可以通过除以圆圈中的弧度数来计算百分比。I have a pie chart for which I want to add percentages to the label. Here is a jsfiddle of the pie chart and the code is below. Right now the chart shows the actual values. I looked at the dc.js Getting Started and How-To Guide which is an example of a dashboard. It has the chart with percentages in the label. However, when I try to replicate the structure I get an error. For example, when I use the label function like so
.label(function(d) {if(all.value){return d.key + " " + d.value / all.value();} .renderLabel(true)in the console it says that all is not defined. Also, the
d.keyreturns nothing as well. I guess my data has a different structure. Help appreciated. Thanks.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();Data
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" }];
解决方案You were close! In cases like this, I'd recommend doing something like the following:
.label(function(d) { console.log(JSON.stringify(d)); })to get a feel for the structure of your data. If you do so, you'll see that
keyandvalueare underd.data, so you could have a label like.label(function(d) { return d.data.key + ' ' + d.data.value + '%'; })If you just want to calculate the fraction of the circle being displayed, you can use the
startAngleandendAngleproperties..label(function(d) { return d.data.key + ' ' + Math.round((d.endAngle - d.startAngle) / Math.PI * 50) + '%'; });
(d.endAngle - d.startAngle)will give you the number of radians the slice is displaying, so you can calculate a percentage from there by dividing by the number of radians in a circle.这篇关于将百分比添加到dc.js中的饼图标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
