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

jdg4fx2g  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(149)

我目前使用的是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)"
    }
}
xtfmy6hx

xtfmy6hx1#

您可以在工具提示配置中使用mode: 'x'。同时在两个数据集中将pointHitRadius设置为0,这样您的工具提示中就不会有重复的值。
示例:https://codesandbox.io/s/hardcore-brown-1vxcjh?file=/src/components/CChart.jsx

相关问题