我目前使用的是chart.js 3.5.0和react-chart-js 3.0.4的折线图,给定两个数据集。
第一个数据集包含{x,y}格式的数据,其中某些y为空值。当鼠标悬停在这些空值上时,工具提示会跳到第二个数据集的开头。在本例中,我希望隐藏工具提示,但通过回调解决问题不起作用。
有人遇到过同样的问题吗?
Screenshot
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)"
}
}
1条答案
按热度按时间xtfmy6hx1#
您可以在工具提示配置中使用
mode: 'x'
。同时在两个数据集中将pointHitRadius
设置为0,这样您的工具提示中就不会有重复的值。示例:https://codesandbox.io/s/hardcore-brown-1vxcjh?file=/src/components/CChart.jsx