Chart.js V4.2.1如何实现多tooltip同时显示？

要实现鼠标指向指定月份（如February）时同时显示多个月份（如February和May）的Tooltip，你可以通过自定义Chart.js插件拦截Tooltip的生成逻辑，手动添加需要展示的目标数据点。以下是具体实现步骤：

核心思路 #

利用Chart.js的插件机制，在Tooltip绘制前的钩子中检查当前激活的数据点对应的月份，若为目标月份之一，则将另一个目标月份的数据点添加到Tooltip的激活列表中，从而实现多Tooltip内容同时展示。

代码实现示例 #

// 初始化图表
const ctx = document.getElementById('myChart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'line', // 可根据你的图表类型调整，如bar等
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: '业务数据',
      data: [65, 59, 80, 81, 56, 55, 40],
      borderColor: '#4BC0C0',
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      tension: 0.1
    }]
  },
  options: {
    plugins: {
      tooltip: {
        trigger: 'custom', // 启用自定义触发逻辑
        position: 'average', // 让Tooltip居中显示，避免重叠
        callbacks: {
          label: (context) => `${context.dataset.label}: ${context.raw}`
        }
      }
    }
  },
  plugins: [{
    id: 'multiTooltipPlugin',
    // 在Tooltip绘制前修改激活元素列表
    beforeTooltipDraw: (tooltip) => {
      const { chart } = tooltip;
      const activeElements = chart.tooltip.active;
      if (activeElements.length === 0) return;

      // 定义需要关联显示的月份对
      const linkedLabels = ['February', 'May'];
      const currentLabel = activeElements[0].label;

      // 如果当前激活的是目标月份，添加另一个月份的元素
      if (linkedLabels.includes(currentLabel)) {
        const targetLabel = linkedLabels.find(label => label !== currentLabel);
        const targetIndex = chart.data.labels.indexOf(targetLabel);
        
        // 获取对应数据集的目标数据元素
        const targetElement = chart.getDatasetMeta(0).data[targetIndex];
        // 将目标元素加入激活列表，Tooltip会自动渲染它的内容
        chart.tooltip.active.push(targetElement);
      }
    }
  }]
});

关键细节说明 #

1. 自定义触发模式：将tooltip.trigger设为'custom'，绕过Chart.js默认的单元素激活逻辑，允许手动控制哪些数据点显示Tooltip。
2. 插件钩子选择：使用beforeTooltipDraw钩子，在Tooltip绘制前修改激活元素列表，确保Tooltip渲染时包含所有需要的数据点。
3. 多数据集适配：如果图表有多个数据集，只需遍历所有数据集，为每个数据集添加对应索引的目标元素即可，示例中仅处理了单个数据集。
4. 样式调整：设置tooltip.position为'average'可以让Tooltip基于多个激活元素的位置居中显示，避免内容重叠。

注意事项 #

• 确保data.labels中的月份名称与代码中定义的linkedLabels完全一致，否则无法匹配到目标索引。
• 若需要关联更多月份，只需扩展linkedLabels数组并调整逻辑（比如处理多对关联的情况）。

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