如何在ChartJS 4中追踪折线图线条点击事件并获取数据集索引？

要实现点击折线图的线条而非数据点时获取对应数据集索引，你可以通过自定义监听图表的点击事件，结合Canvas的路径判断方法来实现，具体步骤如下：

• 监听图表Canvas元素的click事件，将点击坐标转换为图表内部的相对坐标
• 遍历每个数据集，获取其线条的Canvas路径对象
• 使用isPointInStroke方法判断点击位置是否落在线条的描边范围内（该方法会自动考虑线条宽度）

代码示例 #

// 初始化折线图
const chart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['一月', '二月', '三月'],
    datasets: [
      {
        label: '数据集1',
        data: [12, 19, 3],
        borderWidth: 3,
        borderColor: '#ff6384'
      },
      {
        label: '数据集2',
        data: [5, 25, 10],
        borderWidth: 3,
        borderColor: '#36a2eb'
      }
    ]
  },
  options: {
    responsive: true
  }
});

// 获取图表Canvas元素
const canvas = chart.canvas;

// 监听点击事件
canvas.addEventListener('click', (e) => {
  const rect = canvas.getBoundingClientRect();
  // 转换为图表内部坐标
  const clickX = e.clientX - rect.left;
  const clickY = e.clientY - rect.top;

  // 遍历所有数据集，检查点击是否命中线条
  chart.data.datasets.forEach((_, datasetIndex) => {
    const meta = chart.getDatasetMeta(datasetIndex);
    // 跳过隐藏的数据集
    if (!meta.hidden && meta.dataset._path) {
      const linePath = meta.dataset._path;
      // 判断点击点是否在线条描边范围内
      if (linePath.isPointInStroke(clickX, clickY)) {
        console.log('命中数据集索引:', datasetIndex);
        // 这里添加你的业务逻辑，比如高亮数据集、显示详情等
      }
    }
  });
});

关键说明 #

• isPointInStroke是Canvas Path对象的原生方法，能准确判断点是否落在路径的描边区域内，完美适配折线图线条的点击检测
• 记得判断数据集是否隐藏（meta.hidden），避免触发隐藏数据集的点击逻辑
• 如果需要调整点击检测的灵敏度，可以通过修改数据集的borderWidth，或者自定义距离计算逻辑（比如计算点击点到线条线段的距离）

内容的提问来源于stack exchange，提问作者Никита Загороднев