如何让Chart.js在散点图鼠标悬停时绘制对应数据点间的连线

核心思路 #

放弃使用setHoverStyle，转而通过监听鼠标交互事件，获取当前悬停点的索引，再动态生成对应索引两点间的连线。推荐用新增辅助折线系列的方式实现，这种方法比修改元素样式更灵活，能直接完成连线需求。

具体实现步骤（以ECharts为例） #

• 新增一个空的折线系列，默认隐藏，专门用来绘制悬停时的连线
• 监听mouseover事件：捕获悬停点的索引，从两个数据集中取出对应坐标，生成连线数据并更新辅助系列
• 监听mouseout事件：清空辅助系列数据，隐藏连线

代码示例 #

// 初始化图表实例
const myChart = echarts.init(document.getElementById('main'));

// 原始数据集
const activeData = [[12, 23], [34, 45], [56, 67], [78, 89]]; // A1-A4
const passiveData = [[18, 29], [39, 50], [61, 72], [83, 94]]; // P1-P4

const option = {
  tooltip: { trigger: 'item' },
  xAxis: { type: 'value' },
  yAxis: { type: 'value' },
  series: [
    {
      name: 'active',
      type: 'scatter',
      data: activeData,
      symbolSize: 12,
      itemStyle: { color: '#ff7d00' }
    },
    {
      name: 'passive',
      type: 'scatter',
      data: passiveData,
      symbolSize: 12,
      itemStyle: { color: '#009688' }
    },
    {
      name: 'hover-connector',
      type: 'line',
      data: [],
      lineStyle: { color: '#673ab7', type: 'dashed', width: 2 },
      silent: true, // 避免干扰原散点交互
      showSymbol: false, // 不显示连线端点标记
      emphasis: { disabled: true }
    }
  ]
};

myChart.setOption(option);

// 监听鼠标悬停事件
myChart.on('mouseover', (params) => {
  // 只响应两个散点系列的悬停
  if (['active', 'passive'].includes(params.seriesName)) {
    const targetIndex = params.dataIndex;
    // 生成对应索引两点的连线数据
    const lineData = [activeData[targetIndex], passiveData[targetIndex]];
    // 更新辅助系列
    myChart.setOption({
      series: [{ name: 'hover-connector', data: lineData }]
    });
  }
});

// 监听鼠标移出事件
myChart.on('mouseout', () => {
  // 清空连线数据
  myChart.setOption({
    series: [{ name: 'hover-connector', data: [] }]
  });
});

关键说明 #

• setHoverStyle仅用于修改单个图形元素的样式，无法新增连线这类独立元素，因此辅助系列是更合适的方案
• 辅助系列设置silent: true是为了防止连线拦截鼠标事件，保证原散点的交互正常
• 如果使用其他可视化库（如D3.js），思路一致：监听鼠标事件获取索引，动态创建/移除连线DOM元素即可

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