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

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



至:



我曾经使用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>"

最佳答案

Chart.js v2具有与早期版本完全不同的API。在升级之前,您应该仔细阅读新的documentation(然后必须怀疑什么是正确的)。

基本变化(与您的问题有关)是:

  • legendTemplatesegments不再可用。您应该改用 legendCallback (在options中)覆盖默认的图例实现。以下是有关此回调的文档说明:


  • 您在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源代码,尤其是看看legendCallBackgenerateLegend()等,以更好地了解事物的工作原理。

    关于javascript - 在chart.js(v2 +)图例中返回百分比,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40066552/

    10-16 22:58