如何从页面其他区域触发ChartJS数据点的悬停提示？

完全可以实现这个需求，核心思路是利用ChartJS提供的API手动控制Tooltip的显示和隐藏，结合表格行的悬停事件触发对应操作，具体步骤如下：

1. 保存图表实例 #

首先确保能拿到渲染后的图表实例，你的render_graph函数已经返回了实例，直接保存即可：

// 渲染图表并保存实例
const chartInstance = render_graph(你的输入参数);

2. 绑定表格行的悬停事件 #

找到页面中的表格行元素，为它们绑定mouseover和mouseout事件：

// 获取所有表格行（假设表格行的选择器是.table-row）
const tableRows = document.querySelectorAll('.table-row');

tableRows.forEach((row, index) => {
  // 鼠标悬停时显示对应Tooltip
  row.addEventListener('mouseover', () => {
    // 假设表格行索引和图表数据数组索引一一对应
    const targetDataIndex = index;
    // 定义要激活的数据元素
    const activeElements = [{
      datasetIndex: 0, // 你的图表只有一个数据集，索引为0
      index: targetDataIndex
    }];
    
    // 设置激活元素并更新图表，触发Tooltip显示
    chartInstance.setActiveElements(activeElements);
    chartInstance.update();
  });

  // 鼠标离开时隐藏Tooltip
  row.addEventListener('mouseout', () => {
    // 清空激活元素，隐藏Tooltip
    chartInstance.setActiveElements([]);
    chartInstance.update();
  });
});

3. 处理非索引匹配的情况（可选） #

如果表格行和图表数据不是按索引对应，而是通过Date字段关联，可通过匹配日期找到对应数据索引：

row.addEventListener('mouseover', () => {
  // 从表格行获取日期（假设行内有存储日期的data属性data-date）
  const rowDate = row.dataset.date;
  // 在图表数据中匹配对应日期的索引
  const targetDataIndex = chartInstance.data.datasets[0].data.findIndex(item => item.Date === rowDate);
  
  if (targetDataIndex !== -1) {
    const activeElements = [{
      datasetIndex: 0,
      index: targetDataIndex
    }];
    chartInstance.setActiveElements(activeElements);
    chartInstance.update();
  }
});

关键API说明 #

• setActiveElements(elements)：设置图表中处于激活状态的元素，激活元素会自动触发Tooltip显示
• update()：更新图表状态，让激活元素的变化生效

注意：如果使用ChartJS 2.x版本，setActiveElements不可用，可改用showTooltip方法替代：

chartInstance.showTooltip(activeElements, true);

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