Chart.js：实现鼠标悬停时显示同一X轴所有数据点的标签与数值

嘿，这个需求Chart.js本身就提供了现成的解决方案，完全不用自己写复杂的自定义逻辑，调整几个配置参数就能轻松搞定！

核心思路就是利用Chart.js内置的Tooltip配置，让它在鼠标悬停到任意位置时，自动关联对应X轴刻度下的所有数据系列：

• 把Tooltip的mode设置为'index'：这会让Tooltip展示当前鼠标位置对应的X轴索引下，所有数据集的标签和数值。
• 把intersect设为false：不需要精准悬停在数据点上，只要鼠标处于某个X轴刻度对应的垂直区域内，就会触发Tooltip。

给你一个完整的代码示例，直接套用就能生效：

const myChart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['Jan 01', 'Jan 02', 'Jan 03', 'Jan 04'],
    datasets: [
      {
        label: '用户活跃度',
        data: [86, 92, 78, 95],
        borderColor: '#2196F3',
        fill: false
      },
      {
        label: '订单量',
        data: [120, 156, 112, 168],
        borderColor: '#4CAF50',
        fill: false
      },
      {
        label: '销售额',
        data: [24000, 31200, 22400, 33600],
        borderColor: '#FF9800',
        fill: false
      }
    ]
  },
  options: {
    plugins: {
      tooltip: {
        mode: 'index',
        intersect: false,
        // 可选：自定义Tooltip的显示格式，让内容更清晰
        callbacks: {
          label: function(context) {
            return `${context.dataset.label}: ${context.parsed.y}`;
          }
        }
      }
    }
  }
});

如果还想进一步定制Tooltip的样式（比如背景色、字体、位置），可以在tooltip配置里添加backgroundColor、bodyFont等参数，Chart.js的文档里有详细的可选配置项可以参考。

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