return chart.js (v2+) 图例中的百分比

Question

Chart.js 2+ 不再 return 饼图中图例项目的百分比。

我将图例存储在名为 #legend 的 html 中的单独项目中。然后我将它的 innerHTML 设置为 myPieChart.generateLegend()。它 return 是颜色和名称，但我希望能够将此 HTML 模板覆盖为 return 百分比，因此输出看起来像：

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>"

Answer 1

Chart.js v2 has a completely different API than earlier versions. You should read the new documentation 升级前仔细（然后不得不想知道哪里出了问题）。

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

legendTemplate 和 segments 不再可用。您应该改为使用 legendCallback（在 options 中）来覆盖默认的图例实现。以下是文档中关于此回调的内容：

Function to generate a legend. Receives the chart object to generate a legend from. Default implementation returns an HTML string.

您在 segments 中使用的数据在 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;

为了完整起见，我还在工具提示标签上添加了相同的 TEXT (PERCENTAGE%) 模板（与图例类似，提供自己的回调以覆盖默认实现）。

我还建议浏览实际的 Chart.js 源代码，特别是查看 legendCallBack、generateLegend() 等，以便更好地了解其工作原理在引擎盖下。

return chart.js (v2+) 图例中的百分比

return percentage in chart.js (v2+) legend

javascript

jquery

chart.js

chart.js2