我正在尝试在 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
