Chart.js 在图例中包含百分比

如何将分段百分比添加到图表标签

示例 （百分比值并不反映实际图表，这只是一个示例。）

这是我当前的模板

<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>

您可以更新模板来做一些额外的事情。1获取所表示的总数，然后在显示标签的循环中以占总数的百分比打印标签值的结果

丑陋的绳子

 legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% var total = segments.reduce(function(previousValue, currentValue){ return previousValue + currentValue.value;},0); for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%> <%=Math.floor((segments[i].value/total)*100)%>%<%}%></li><%}%></ul>"

然后在显示时，使用总数计算百分比（此处使用floor只是为了确保我们不会得到一个可怕的数字，甚至可以在将floor四舍五入到最接近的百分比之前将其加上0.5）

示例（另附）

$（函数（）{
var pieChartCanvas=$（“#pieChart”）.get（0.getContext（“2d”）；
变量数据=[{
价值：70000，
颜色：“f56954”，
亮点：“f56954”，
标签：“铬”
}, {
价值：6000，
颜色：“00a65a”，
亮点：“00a65a”，
标签：“IE”
}, {
价值：4000，
颜色：“f39c12”，
亮点：“f39c12”，
标签：“FireFox”
}, {
价值：4000，
颜色：“00c0ef”，
亮点：“00c0ef”，
标签：“狩猎”
}, {
价值：3000，
颜色：“3c8dbc”，
亮点：“3c8dbc”，
标签：“歌剧”
}];
变量选项={
这是真的，
segmentStrokeColor:#fff“，
分段行程宽度：2，
百分比内部断路器：50，
动画步骤：100，
动画化：“easeOutBounce”，
动画片：对，
动画缩放：错误，
回答：是的，
维护Aspectratio：是的，
legendTemplate:“
%
”
};
var pieChart=新图表（pieChartCanvas）.Doughnut（PieData，pieOptions）；
var helpers=Chart.helpers；
var legendHolder=document.getElementById（'graph-legend'）；
legendHolder.innerHTML=pieChart.generateLegend（）；
//在模块甜甜圈本身之后包含一个html图例模板
helpers.each（legendHolder.firstChild.childNodes，函数（legendNode，索引）{
addEvent（legendNode，'mouseover'，function（）{
var activeSegment=pieChart.segments[index]；
activeSegment.save（）；
显示工具提示（[activeSegment]）；
activeSegment.restore（）；
});
});
addEvent（legendHolder.firstChild，'mouseout'，function（）{
pieChart.draw（）；
});
document.getElementById（'graph-legend'）.appendChild（legendHolder.firstChild）；
});
#图形图例{
列表样式：无；
}
#图形图例ulli{
显示：块；
左侧填充：30px；
位置：相对位置；
利润底部：4倍；
边界半径：5px；
填充：2px8px 2px28px；
字体大小：14px；
游标：默认值；
-webkit过渡：背景色200ms易于输入输出；
-moz过渡：背景色200ms缓进缓出；
-o型过渡：背景色200ms缓进缓出；
过渡：背景色200ms，易于输入输出；
}
#图形图例li span{
显示：块；
位置：绝对位置；
左：0；
排名：0；
宽度：20px；
身高：100%；
边界半径：5px；
}

非常详细的回答-谢谢。这正是我要找的。很好，很高兴我能帮上忙（主题之外，但我觉得很有趣，我必须查找OK是否正确，并找到一个非常好的小解释），总之回到代码：）
var total = segments.reduce(function(previousValue, currentValue){
    return previousValue + currentValue;
},0);

Math.floor((segments[i].value/total)*100)