Javascript chart.js（v2+；）图例中的返回百分比

2+不再返回饼图中图例项的百分比

我将图例存储在名为

#legend

的html中的单独项目中。然后我将它的

innerHTML

设置为

myPieChart.generateLegend（）

。它返回颜色和名称，但我希望能够覆盖此HTML模板以同时返回百分比，因此输出看起来像：

• A
• B
• C

致：

• A（13%）
• B（50%）
• C（37%）

我曾经用

legendTemplate

参数来做这件事，但它似乎不再起作用了：

legendTemplate: "<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%> (<%=segments[i].value%>%)<%}%></li><%}%></ul>"

legendTemplate:“
（%）
”

v2的API与早期版本完全不同。在升级之前，你应该仔细阅读新版本（然后不得不怀疑文没有错）

基本变化（与您的问题相关）是：

• legendTemplate

  和

  片段

  不再可用。您应该改为使用（在

  选项中）覆盖默认图例实现。以下是有关此回调的文档说明：

函数生成图例。接收要从中生成图例的图表对象。默认实现返回一个HTML字符串

• 在

  legendCallback

  函数的

  chart

  参数（即您的实际图表对象）中可以找到您从

  段中使用的数据：
  chart.data.datasets[0]。data
  
  现在我们知道了从何处获取所需数据，我们可以循环使用
  chart.data.datasets[0].data
  来收集值并将它们附加到图例HTML字符串中
  然后我们可以简单地调用
  myPieChart.generateLegend（）
  ，它将调用我们的
  legendCallback
  

完整示例：

var myPieChart = new Chart(ctx, {
    type: 'pie',
    data: d,
    options: {
        responsive: true,
        maintainAspectRatio: false,
        tooltips: {
            callbacks: {
                label: function (tooltipItem, data) {
                    return data.labels[tooltipItem.index] + ' (' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + '%)';
                }
            }
        },
        legendCallback: function (chart) {
            var text = [];
            text.push('<ul class="' + chart.id + '-legend">');

            var data = chart.data;
            var datasets = data.datasets;
            var labels = data.labels;

            if (datasets.length) {
                for (var i = 0; i < datasets[0].data.length; ++i) {
                    text.push('<li><span style="background-color:' + datasets[0].backgroundColor[i] + '"></span>');
                    if (labels[i]) {
                        text.push(labels[i] + ' (' + datasets[0].data[i] + '%)');
                    }
                    text.push('</li>');
                }
            }
            text.push('</ul>');
            return text.join('');
        },
        legend: {
            // since you're providing your own legend
            display: false,
        },                
    }
});

var legend = myPieChart.generateLegend();
document.getElementById("legend").innerHTML = legend;

var myPieChart=新图表（ctx{
键入“pie”，
数据：d，
选项：{
回答：是的，
MaintaintAspectRatio:false，
工具提示：{
回调：{
标签：函数（工具提示项、数据）{
返回data.labels[tooltipItem.index]+'（'+data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]+'%）；
}
}
},
legendCallback:函数（图表）{
var text=[]；
text.push（“
”）；
var数据=图表数据；
var数据集=data.dataset；
变量标签=data.labels；
if（datasets.length）{
对于（var i=0；i<数据集[0]。data.length；++i）{
text.push（“
”）；
if（标签[i]）{
text.push（标签[i]+'（'+数据集[0].数据[i]+'%]）；
}
text.push（“
”）；
}
}
text.push（“
”）；
返回text.join（“”）；
},
图例：{
//因为你提供了你自己的传奇
显示：假，
},                
}
});
var legend=myPieChart.generateLegend（）；
document.getElementById（“图例”）.innerHTML=图例；

为了完整起见，我还在工具提示标签上添加了相同的

文本（百分比%）

模板（类似于图例，它提供了自己的回调以覆盖默认实现）

---

我还建议浏览实际的Chart.js源代码，特别是查看

legendCallBack

，

generateLegend（）

，以便更好地了解引擎盖下的工作原理。

请为您的问题提供上下文和代码，以便其他人也能从中受益；您当前如何生成图例文本？到目前为止你都试了些什么？嗨，谢谢你的回复，看看我的更新它的效果！！非常感谢您迄今为止的帮助！很高兴我能帮忙。