回报百分比在图表.js (v2+)图例

Question

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

我将图例存储在我的html中名为#legend的单独项目中。然后我把innerHTML设为myPieChart.generateLegend()。它返回颜色和名称，但我希望能够覆盖这个HTML模板，也返回百分比，所以输出看起来像:

B
C

:

• (13%)
• B (50%)
C
• /ul>

我曾经用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的API与早期版本完全不同。在升级之前，你应该仔细阅读新的文档(然后必须想清楚哪里没有错)。

与你的问题有关的根本变化是:

• legendTemplate和segments不再可用。您应该使用legendCallback(在options中)来覆盖默认的图例实现。以下是文档中关于这个回调的说明:

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

• 您从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()等，以更好地理解事情是如何工作的