Chart.js实现图表初始化时自动在最后数据点显示tooltip

需求说明 #

开发天气类图表时需实现以下Tooltip交互逻辑：

• 图表渲染完成后，默认在最后一个数据点展示Tooltip
• 鼠标移动到其他数据点时，Tooltip自动切换到当前悬停的数据点
• 鼠标移出图表区域时，Tooltip自动隐藏

现存问题 #

参考官方编程式事件示例编写的Tooltip触发代码存在异常：修改index参数无法控制Tooltip绑定的柱形位置，修改x/y坐标参数后，Tooltip仍固定显示在靠近第三个柱形的位置，未按预期变化。
异常代码如下：

function triggerTooltip(chart) {
const tooltip = chart.tooltip; 
if (tooltip.getActiveElements().length > 0) 
  { tooltip.setActiveElements([], {x: 0, y: 0}); } 
  else { 
   const chartArea = chart.chartArea; 
   tooltip.setActiveElements([
      {
        datasetIndex: 0,
        index: 0,
      }, {
        datasetIndex: 1,
        index: 0,
      }], 
     { x: (chartArea.left + chartArea.right) / 2, 
       y: (chartArea.top + chartArea.bottom) / 2, }); 
    } 
chart.update(); } 

问题原因 #

代码失效核心是两个逻辑错误：

1. setActiveElements接收的第二个参数是模拟触发事件的指针坐标，不是Tooltip的固定显示坐标，Tooltip位置会根据激活元素的位置自动计算，手动传入图表中心点坐标会和内部事件定位逻辑冲突，导致位置偏移
2. 现有逻辑判断「存在激活元素就清空状态」，和需求里「悬停自动切换、移出才隐藏」的逻辑完全相悖，会覆盖默认的hover激活行为

正确实现代码 #

不需要改写默认的hover交互逻辑，只需要单独处理「初始化默认展示最后一个点」和「鼠标移出隐藏」两个逻辑即可：

// 图表实例化
const weatherChart = new Chart(document.getElementById('yourChartId'), {
  type: 'bar', // 折线图等其他类型逻辑通用
  data: yourChartData, // 替换为实际图表数据
  options: {
    // 其余业务配置保持不变
    animation: {
      // 渲染完成后默认激活最后一个数据点
      onComplete: function() {
        const chartIns = this;
        const lastDataIndex = chartIns.data.labels.length - 1;
        const activeItems = [];
        // 组装所有数据集下最后一个数据点的激活配置
        chartIns.data.datasets.forEach((_, datasetIndex) => {
          activeItems.push({
            datasetIndex,
            index: lastDataIndex
          })
        })
        // 获取最后一个数据点的实际坐标，传入作为模拟触发位置
        const lastPointMeta = chartIns.getDatasetMeta(0).data[lastDataIndex];
        chartIns.tooltip.setActiveElements(activeItems, {
          x: lastPointMeta.x,
          y: lastPointMeta.y
        });
        chartIns.update();
      }
    },
    plugins: {
      tooltip: {
        // 保留默认mousemove触发逻辑，即可实现悬停自动切换Tooltip
        events: ['mousemove']
      }
    }
  }
});

// 监听画布鼠标移出事件，清空Tooltip
document.getElementById('yourChartId').addEventListener('mouseleave', () => {
  weatherChart.tooltip.setActiveElements([], {x: 0, y: 0});
  weatherChart.update();
});

注意事项 #

• 无需手动计算Tooltip显示坐标，只要传入激活元素的实际坐标，Tooltip会自动定位到对应元素位置
• 不要覆盖Chart.js默认的mousemove事件处理逻辑，框架原生逻辑已经实现悬停自动切换激活元素的能力，额外手写逻辑反而会引发冲突
• 多数据集场景下，需要把所有要在Tooltip里展示的数据集对应index都加入activeItems数组，否则Tooltip只会展示单个数据集的内容

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