Chart.js中鼠标悬停折线（非数据点）时如何获取对应数据集？

要实现鼠标悬停在折线（而非数据点）时输出对应数据集，你可以通过监听canvas的鼠标移动事件，结合Chart.js的getElementsAtEventForMode API来实现，具体步骤如下：

修改后的完整代码 #

var canvas = document.getElementById('myChart');

var data = {
  labels: [1, 2, 3, 4, 5, 6, 7],
  datasets: [{
      label: "a1-fam",
      cell_id: 1,
      fill: false,
      data: [2, 2, 5, 7, 10, 12, 18],
    },
    {
      label: "a1-rox",
      cell_id: 1,
      fill: false,
      data: [0, 0, 1, 1, 1, 1, 1],
    },
    {
      label: "a2-fam",
      cell_id: 2,
      fill: false,
      data: [2, 2, 11, 12, 11, 14, 15],
    },
    {
      label: "a2-rox",
      cell_id: 2,
      fill: false,
      data: [0, 2, 9, 10, 10, 11, 12],
    },
  ]
};

const myChart = new Chart(canvas, {
  type: 'line',
  data: data,
  options: {
    showLines: true,
    // 可选：调整折线宽度，提升悬停检测的灵敏度
    elements: {
      line: {
        borderWidth: 3
      }
    }
  }
});

// 监听canvas的鼠标移动事件
canvas.addEventListener('mousemove', function(e) {
  // 获取鼠标在canvas坐标系中的位置
  const rect = canvas.getBoundingClientRect();
  const mouseX = e.clientX - rect.left;
  const mouseY = e.clientY - rect.top;

  // 使用nearest模式获取鼠标附近的元素
  const elements = myChart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);
  
  if (elements.length > 0) {
    // 获取第一个匹配元素对应的数据集索引
    const datasetIndex = elements[0].datasetIndex;
    const targetDataset = myChart.data.datasets[datasetIndex];
    
    // 提取需要输出的字段并打印到控制台
    const outputData = {
      label: targetDataset.label,
      fill: targetDataset.fill,
      data: targetDataset.data
    };
    console.log(outputData);
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart"></canvas>

关键逻辑说明 #

1. 鼠标位置转换：将鼠标在页面中的坐标转换为canvas内部的相对坐标，确保检测位置准确。
2. getElementsAtEventForMode：Chart.js提供的API，'nearest'模式会查找鼠标位置最近的图表元素（包括折线路径）；intersect: true确保只检测鼠标实际接触到的元素。
3. 数据集提取：从返回的元素中拿到datasetIndex，即可从myChart.data.datasets中获取对应数据集，再筛选出需要的字段输出。
4. 灵敏度优化：通过调整elements.line.borderWidth可以增大折线的可检测区域，让悬停触发更灵敏。

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