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

Question

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

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

• 一个
• 乙
• 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与早期版本的API完全不同.您应该在升级之前仔细阅读新文档(然后不得不想知道什么是错的).

根本性的变化(与您的问题相关)是:

• legendTemplate并且segments不再可用.您应该使用legendCallback(in options)覆盖默认的图例实现.以下是文档中有关此回调的内容:

用于生成图例的功能.接收图表对象以生成图例.默认实现返回HTML字符串.

• 您使用的数据segments可在此chart函数的参数(即您的实际图表对象)中legendCallback找到: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()等,以更好地了解事情的引擎盖下是如何工作的.