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()
等,以更好地了解事物的工作原理。