ChartJS-z点/工具提示的索引值



在ChartJS上使用折线图。当您将鼠标悬停在图表上的某个点上并显示工具提示时,是否有方法编辑分层(本质上是zIndex值(,以便工具提示显示在图形点后面?

基本上,我希望这个工具提示放在圆圈后面,而不是像这

没有插件挂钩可以在线和点绘制之间进行通知,所以最好使用beforeDatasetsDraw挂钩来绘制。默认情况下,工具提示只使用afterDraw挂钩来绘制工具提示,因此您需要手动将beforeDatasetsDraw挂钩添加到工具提示,并将其设置为afterDraw挂钩,并使其成为空函数,如下所示:

Chart.Tooltip.beforeDatasetsDraw = Chart.Tooltip.afterDraw;
Chart.Tooltip.afterDraw = () => {}
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.js"></script>
</body>

最新更新