Chart.js v3.9.1折线图Tooltip触发偏移问题求助

问题现象 #

使用Chart.js v3.9.1实现折线图时，Tooltip触发出现异常：鼠标沿X轴向右移动时，触发Tooltip的位置会逐渐偏离对应数据点，需要在离数据点越来越远的位置悬停，才能弹出Tooltip。

可能的修复方案 #

1. 开启interaction.intersect: false #

默认intersect为true，要求鼠标精确命中数据点区域才触发Tooltip。当图表存在坐标计算偏差时，关闭精确命中检查，让Tooltip在鼠标靠近数据点时就触发：

interaction: {
    mode: 'point',
    intersect: false // 添加此配置
}

2. 确认X轴类型与数据匹配 #

如果X轴配置的type和实际数据类型不匹配，会导致坐标映射错误：

• 时间序列数据：设置scales.x.type: 'time'，并确保数据格式符合时间轴要求；
• 数值型数据：设置scales.x.type: 'linear'；
• 分类数据：设置scales.x.type: 'category'。

3. 升级Chart.js至v3.10.0及以上版本 #

v3.9.1存在已知的Tooltip交互计算bug，官方在后续版本中修复了X轴坐标累积误差的问题。直接升级依赖即可解决：

# npm 升级
npm update chart.js

4. 自定义Tooltip定位逻辑 #

若默认的nearest定位逻辑有偏差，可以自定义定位函数修正坐标：

tooltip: {
    position: function(context) {
        const basePos = Chart.Tooltip.positioners.nearest(context);
        // 根据实际偏移情况调整X坐标，示例中设为0，可按需修改
        basePos.x += 0;
        return basePos;
    },
    callbacks: {
        label: (context) => {
            // 原标签逻辑
        }
    }
}

5. 检查容器样式 #

确保图表容器没有应用transform: scale()等可能导致坐标偏移的CSS样式，这类样式会让Chart.js计算的鼠标位置与实际页面位置不匹配。

问题性质 #

该问题属于Chart.js v3.9.x版本的已知bug，由X轴坐标映射时的精度误差累积导致。升级到v3.10.0及以上版本是最直接的修复方式。

内容的提问来源于stack exchange，提问作者Kirill Miniaev