Chart.js图表Tooltip显示X轴数值错误问题求助

嘿，我一眼就看出问题出在哪了——这事儿跟你设置的interaction: { mode: 'y' }脱不了干系！

问题原因 #

当你把交互模式设为'y'时，Chart.js会把所有Y轴位置相近的数据点都归到同一个Tooltip里。但默认情况下，它只会用第一个数据集（也就是你那个紫色的5390系列）里匹配到的X值来显示，完全忽略了其他数据点自己的真实X值。这就是为什么只有紫色线条的Tooltip显示正确，其他线条的X值全错了。

两种解决方案 #

方案1：修改交互模式（推荐，适合只看单个数据点的场景）

如果你不需要同时看同一Y轴高度的所有数据点，直接把交互模式改成'point'，这样Tooltip只会显示你鼠标精确悬停的那个数据点的真实值：

options: {
  interaction: { 
    mode: 'point',
    intersect: true // 确保只有鼠标碰到数据点才触发Tooltip
  },
  scales: { x: { type: 'linear' } }
}

方案2：自定义Tooltip标签（保留Y轴聚合效果）

如果你确实需要同时显示同一Y轴高度的所有数据点，那就要自定义Tooltip的回调函数，强制让每个标签显示对应数据点自己的X值：

options: {
  interaction: { mode: 'y' },
  scales: { x: { type: 'linear' } },
  plugins: {
    tooltip: {
      callbacks: {
        label: function(context) {
          // 获取当前数据点的真实X、Y值
          const pointX = context.parsed.x;
          const pointY = context.parsed.y;
          // 按照你需要的格式返回标签，这里保留两位小数示例
          return `${context.dataset.label}: X = ${pointX.toFixed(2)}, Y = ${pointY.toFixed(2)}`;
        }
      }
    }
  }
}

这样修改后，不管你悬停在哪个数据点上，Tooltip里都会显示它自己真实的X轴数值啦！

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