javascript - 使用 ChartJS v2.0 自定义图例

Question

我正在尝试在 ChartJS v2.0 中创建自定义图例模板。在 ChartJS v1* 中，我只是向新的 Chart 构造函数添加了一个属性，例如...

legendTemplate : '<ul>'
+'<% for (var i=0; i<datasets.length; i++) { %>'
+'<li>'
+'<span style=\"background-color:<%=datasets[i].lineColor%>\"></span>'
+'<% if (datasets[i].label) { %><%= datasets[i].label %><% } %>'
+'</li>'
+'<% } %>'
+'</ul>'

我似乎在 v2.0 中找不到此选项的任何文档。它还能用吗？谁能举例说明如何实现这一目标？

谢谢!

更新 - 下面的工作代码

legendCallback: function(chart) {
                console.log(chart.data);
                var text = [];
                text.push('<ul>');
                for (var i=0; i<chart.data.datasets[0].data.length; i++) {
                    text.push('<li>');
                    text.push('<span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">' + chart.data.datasets[0].data[i] + '</span>');
                    if (chart.data.labels[i]) {
                        text.push(chart.data.labels[i]);
                    }
                    text.push('</li>');
                }
                text.push('</ul>');
                return text.join("");
            }

Answer 1

如果你们浏览了这篇文章并尝试了发布的答案但没有成功，试试这个:

  legendCallback: function(chart) {
    var text = [];
    text.push('<ul>');
    for (var i=0; i<chart.data.datasets.length; i++) {
      console.log(chart.data.datasets[i]); // see what's inside the obj.
      text.push('<li>');
      text.push('<span style="background-color:' + chart.data.datasets[i].borderColor + '">' + chart.data.datasets[i].label + '</span>');
      text.push('</li>');
    }
    text.push('</ul>');
    return text.join("");
  },

然后在下面添加:

document.getElementById('chart-legends').innerHTML = myChart.generateLegend();

创造传奇。确保您有一个元素 <div id="chart-legends"></div>