我的理解是在 3.0 版本中已经贬值了。是否有其他方法可以轻松完成图例的自定义?
问问题
385 次
1 回答
1
是的,有一种非常简单的方法可以使用plugins向 chartJS 3.5 添加自定义图例。
这是它如何工作的示例:
- 创建您的 DOM 结构以支持新的图例和 chartjs 图表。
<div id="legend-id"></div>
<canvas id="chart-id"></canvas>
- 使用一些默认数据和选项设置图表以隐藏当前图例。
const data = {
labels: [
'Red',
'Blue',
'Yellow'
],
datasets: [{
label: 'My First Dataset',
data: [300, 50, 100],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}]
};
const options = {
plugins: {
legend: {
display: false
}
}
};
- 将图表(带有自定义图例)附加到您的 DOM 结构。
const context = document.querySelector("#chart-id");
const chart = new Chart(context, {
type: "doughnut",
data,
options,
plugins: [{
beforeInit: function(chart, args, options) {
// Make sure we're applying the legend to the right chart
if (chart.canvas.id === "chart-id") {
const ul = document.createElement('ul');
chart.data.labels.forEach((label, i) => {
ul.innerHTML += `
<li>
<span style="background-color: ${ chart.data.datasets[0].backgroundColor[i] }">
${ chart.data.datasets[0].data[i] }
</span>
${ label }
</li>
`;
});
return document.getElementById("js-legend").appendChild(ul);
}
return;
}
}]
});
此外,这是一个带有这个自定义图例的工作 jsfiddle !
于 2021-09-08T09:06:24.327 回答