如何使用Chart.js实现折线图折线鼠标悬停高亮效果？

实现该需求的核心逻辑是利用Chart.js内置的事件监听能力，识别用户悬停的折线数据集，动态调整对应折线的样式并重绘即可，具体实现方式如下：

• 首先配置图表基础交互参数，核心配置注意要将options.interaction.mode设置为dataset，才能正确识别当前悬停的整条折线，而不是单个数据点
• 给画布绑定mousemove事件，调用getElementsAtEventForMode方法获取当前悬停的数据集索引
• 动态修改悬停数据集的样式（比如加粗、提高对比度），也可以调低其他未悬停数据集的透明度做反衬，突出高亮效果
• 绑定mouseleave事件，鼠标移出图表区域时重置所有折线的样式为默认状态

完整代码示例 #

HTML 部分 #

<canvas id="lineChart" width="800" height="400"></canvas>

JS 逻辑部分 #

// 引入Chart.js后执行以下逻辑
const chartData = {
  labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
  datasets: [
    { label: '产品A销量', data: [65, 59, 80, 81, 56, 55, 40], borderColor: '#FF6384', borderWidth: 2, tension: 0.4, fill: false },
    { label: '产品B销量', data: [28, 48, 40, 19, 86, 27, 90], borderColor: '#36A2EB', borderWidth: 2, tension: 0.4, fill: false },
    { label: '产品C销量', data: [45, 25, 60, 72, 38, 45, 68], borderColor: '#FFCE56', borderWidth: 2, tension: 0.4, fill: false }
  ]
};

// 初始化图表
const ctx = document.getElementById('lineChart').getContext('2d');
const lineChart = new Chart(ctx, {
  type: 'line',
  data: chartData,
  options: {
    interaction: {
      mode: 'dataset',
      intersect: false
    }
  }
});

// 监听鼠标移动事件实现高亮
ctx.canvas.addEventListener('mousemove', (event) => {
  const activeDatasets = lineChart.getElementsAtEventForMode(event, 'dataset', { intersect: false }, false);
  // 先重置所有折线默认样式
  lineChart.data.datasets.forEach(dataset => {
    dataset.borderWidth = 2;
    dataset.opacity = 1;
  });
  // 存在悬停折线时调整样式
  if (activeDatasets.length) {
    const hoverIndex = activeDatasets[0].datasetIndex;
    // 高亮当前悬停折线：加粗
    lineChart.data.datasets[hoverIndex].borderWidth = 4;
    // 可选：其他折线调低透明度，突出高亮
    lineChart.data.datasets.forEach((dataset, index) => {
      if (index !== hoverIndex) dataset.opacity = 0.3;
    });
  }
  lineChart.update();
});

// 鼠标移出图表时重置所有样式
ctx.canvas.addEventListener('mouseleave', () => {
  lineChart.data.datasets.forEach(dataset => {
    dataset.borderWidth = 2;
    dataset.opacity = 1;
  });
  lineChart.update();
});

你可以根据自己的需求调整高亮效果，比如修改折线阴影、数据点大小、颜色饱和度等，只需要修改对应数据集的配置参数即可。

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