Chart.js堆叠折线图悬停时高亮错误数据点问题求助

你猜的完全没错，这个问题的核心就是Chart.js默认是按数据点在数组中的索引来匹配并高亮同位置的点，而不是根据x轴的时间戳。当你的两个数据集长度不一致、时间戳不完全对齐时，自然就会出现这种错位高亮的情况。

具体解决步骤 #

只需要在图表的options里修改tooltip的配置，把匹配模式从默认的'index'改成'x'，这样Chart.js就会基于x轴的时间戳来寻找对应的数据点，而不是看数组索引：

options: {
  // 其他原有配置...
  tooltips: {
    mode: 'x', // 关键：按x轴值匹配数据点
    intersect: false // 可选优化：鼠标靠近x轴对应区域就触发tooltip，无需精准点在数据点上
  },
  elements: { point: { radius: 1 } },
  scales: {
    xAxes: [{ type: 'time', distribution: 'linear', time: { unit: 'day' } }],
    yAxes: [{ id: 'val', stacked: true, type: 'linear', ticks: { suggestedMin: 0 } }]
  }
}

为什么这个方法有效 #

• mode: 'x'会告诉Chart.js：当你悬停在某个数据点上时，找到所有x轴值（也就是时间戳）和当前点相同的数据点，统一高亮它们，不管这些点在各自数据集里的索引位置。
• 加上intersect: false是优化交互体验，让鼠标只要在x轴对应的垂直区域内，就会显示所有同时间戳的点的tooltip，不用精准点击到点上，对于堆叠折线图来说更实用。

额外注意事项 #

确保不同数据集中的相同时间戳是完全一致的（比如都是同一个moment对象或者相同的时间戳数值），这样Chart.js才能准确匹配到对应的数据点。

把这个配置加到你的render_chart方法的options中，再测试一下，悬停时同时间戳的点就能被正确高亮了！

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