我正在尝试在 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("");
}
最佳答案
如果你们浏览了这篇文章并尝试了发布的答案但没有成功, 试试这个:
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>
关于javascript - 使用 ChartJS v2.0 自定义图例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37005297/