Highcharts：禁用标记悬停时的系列淡化功能

嘿，这个需求太常见啦！要取消悬停时其他系列的淡化效果，让所有系列始终保持完全不透明，得看你用的是哪个可视化图表库，我给你整理了几个主流库的解决方案：

ECharts 解决方案 #

ECharts 默认会在悬停某个系列时，让其他系列进入「模糊淡化」状态，你可以通过全局配置直接关闭这个行为：

option = {
  // 全局关闭悬停时其他系列的淡化效果
  emphasis: {
    blurScope: 'none'
  },
  xAxis: { /* 你的X轴配置 */ },
  yAxis: { /* 你的Y轴配置 */ },
  series: [
    { name: '系列A', type: 'line', data: [12, 34, 22, 45] },
    { name: '系列B', type: 'line', data: [23, 18, 35, 29] }
  ]
};

如果只想针对单个系列禁用这个效果，也可以在对应系列的配置里加：

series: [
  {
    name: '系列A',
    type: 'line',
    data: [12, 34, 22, 45],
    emphasis: { disabled: true } // 该系列悬停时不触发任何强调效果，其他系列也不会淡化
  }
]

Highcharts 解决方案 #

Highcharts 里这个效果由「inactive」状态控制，你可以全局设置让非悬停系列保持完全不透明：

Highcharts.chart('container', {
  plotOptions: {
    // 针对所有系列类型生效（比如line、column都适用）
    series: {
      states: {
        inactive: {
          opacity: 1 // 非悬停系列保持100%不透明度
        }
      }
    }
  },
  series: [
    { name: '系列X', data: [5, 10, 15, 20] },
    { name: '系列Y', data: [10, 5, 20, 15] }
  ]
});

或者更干脆，直接关闭「其他系列进入inactive状态」的逻辑：

plotOptions: {
  series: {
    inactiveOtherPoints: false // 彻底禁用悬停时其他系列的淡化行为
  }
}

Chart.js 解决方案 #

Chart.js 默认的交互模式会淡化非悬停系列，你可以通过修改交互模式来避免这个情况：

const chart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['一月', '二月', '三月', '四月'],
    datasets: [
      { label: '系列1', data: [65, 59, 80, 81], borderColor: '#ff0000' },
      { label: '系列2', data: [28, 48, 40, 19], borderColor: '#00ff00' }
    ]
  },
  options: {
    interaction: {
      mode: 'nearest', // 只高亮当前悬停的点，不影响其他系列的透明度
      intersect: true
    },
    plugins: {
      tooltip: {
        mode: 'nearest' // 配合tooltip，只显示当前点的提示信息
      }
    }
  }
});

如果你的图表用的是其他库（比如D3.js、Plotly等），可以告诉我具体名称，我再给你针对性的配置方案~

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