在chart.js中悬停在空值上时隐藏工具提示

Question

我目前正在使用chart.js 3.5.0和react-chart-js 3.0.4的折线图，给定两个数据集。

第一个数据集具有{x,y}格式的数据，其中某些y为空值。将鼠标悬停在这些空值上时，工具提示跳转到第二个数据集的开头。在这种情况下，我想隐藏工具提示，但是用回调来解决问题不起作用。

有人遇到过同样的问题吗?

截图codesandbox

const options = {
interaction: {
intersect: false
},
maintainAspectRatio: true,
animation: false,
plugins: {
tooltip: {
mode: 'nearest',
axis: 'x',
position: 'average',
yAlign: "bottom"
},
},
scales: {
y: {
type: 'linear',
beginAtZero: true,
min: 0,
grace: '20%',
}
},
chartArea: {
backgroundColor: "rgb(240,240,240)"
}
}

Answer 1

您可以在工具提示配置中使用mode: 'x'。同时在两个数据集中设置pointHitRadius为0，这样你就不会在你的工具提示中有重复的值。

示例:https://codesandbox.io/s/hardcore-brown-1vxcjh?file=/src/components/CChart.jsx