折线图鼠标悬停时调整线条层级的实现方法咨询

核心思路是通过监听鼠标悬停事件，动态调整目标线条的层级属性，将其置为最高；鼠标离开后恢复原层级。以下以常用的Chart.js为例给出具体实现：

步骤1：初始化图表并保存原始层级 #

先定义折线图的基础配置，为每个数据集设置初始order（控制绘制顺序，值越大越靠上），同时保存原始order值用于后续恢复：

const ctx = document.getElementById('myChart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    datasets: [
      { label: 'Line 1', data: [10, 20, 15, 25], borderWidth: 3, order: 0 },
      { label: 'Line 2', data: [15, 25, 20, 30], borderWidth: 3, order: 0 },
      { label: 'Line 3', data: [20, 10, 25, 15], borderWidth: 3, order: 0 }
    ]
  },
  options: {
    interaction: {
      mode: 'index',
      intersect: false
    }
  }
});

// 保存所有数据集的原始order值
const originalOrders = chart.data.datasets.map(ds => ds.order);

步骤2：监听悬停事件调整层级 #

通过监听图表容器的mouseover和mouseout事件，定位到当前悬停的数据集，修改其order为最高值后刷新图表；鼠标离开时恢复原始层级：

chart.canvas.addEventListener('mouseover', (e) => {
  const hoverElements = chart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);
  if (hoverElements.length === 0) return;
  
  const targetDatasetIndex = hoverElements[0].datasetIndex;
  // 将目标数据集的order设为远大于其他值的数，确保置顶
  chart.data.datasets.forEach((ds, idx) => {
    ds.order = idx === targetDatasetIndex ? 100 : 0;
  });
  chart.update();
});

chart.canvas.addEventListener('mouseout', () => {
  // 恢复所有数据集的原始层级
  chart.data.datasets.forEach((ds, idx) => {
    ds.order = originalOrders[idx];
  });
  chart.update();
});

其他可视化库的适配思路 #

如果使用ECharts等其他库，逻辑完全一致：

• 监听mouseover/mouseout事件，获取当前悬停的系列
• 调整该系列的z属性（ECharts中控制层级）为最大值
• 鼠标离开时恢复原z值并刷新图表

这种实现方式并不复杂，核心就是利用可视化库的层级控制属性，结合事件监听动态调整，无需复杂的数据集重排序操作。

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