Highcharts图例自定义样式问题：点击切换失效排查

我来帮你搞定这个图例样式切换的问题～

首先你猜测的作用域问题确实很可能是关键！全局的clickCounter容易出现各种意外：比如被其他代码修改、多图表场景下冲突，甚至可能和系列实际的显示/隐藏状态不同步（比如用户通过API手动切换系列可见性时，计数器不会跟着更新）。

给你两个更可靠的解决方案，优先推荐第一种：

方案1：利用系列的visible状态判断（最准确） #

Highcharts的系列本身就有visible属性，直接用它来判断当前状态，比计数器更靠谱，还能避免状态不一致的问题：

Highcharts.chart('container', {
  plotOptions: {
    series: {
      events: {
        legendItemClick: function() {
          // 获取当前图例项的DOM元素
          const legendItemEl = this.legendItem.element;
          
          // 根据系列即将切换的状态应用样式
          if (this.visible) {
            // 当前是显示状态，点击后会隐藏，加禁用样式
            legendItemEl.classList.add('disabled-legend');
            legendItemEl.classList.remove('active-legend');
          } else {
            // 当前是隐藏状态，点击后会显示，加激活样式
            legendItemEl.classList.add('active-legend');
            legendItemEl.classList.remove('disabled-legend');
          }
          
          // 如果你想阻止Highcharts默认的显示/隐藏行为，就return false
          // return false;
        }
      }
    }
  },
  // 你的图表其他配置
  series: [
    { name: '系列1', data: [10, 20, 30] },
    { name: '系列2', data: [5, 15, 25] }
  ]
});

对应的CSS样式示例：

/* 激活状态样式 */
.active-legend {
  color: #27ae60;
  font-weight: 600;
}

/* 禁用状态样式 */
.disabled-legend {
  color: #95a5a6;
  text-decoration: line-through;
  opacity: 0.7;
}

方案2：修复计数器的作用域问题（如果一定要用计数器） #

如果你坚持想用计数器，要把它放在闭包里，避免全局污染，确保作用域正确：

(function() {
  let clickCounter = 0; // 闭包里的变量，不会被外部干扰
  
  Highcharts.chart('container', {
    plotOptions: {
      series: {
        events: {
          legendItemClick: function() {
            clickCounter++;
            const legendItemEl = this.legendItem.element;
            
            if (clickCounter % 2 === 0) {
              legendItemEl.classList.add('active-legend');
              legendItemEl.classList.remove('disabled-legend');
            } else {
              legendItemEl.classList.add('disabled-legend');
              legendItemEl.classList.remove('active-legend');
            }
          }
        }
      }
    },
    // 你的图表其他配置
  });
})();

不过还是强烈推荐方案1，因为它和Highcharts的内置状态完全同步，不会出现计数器和实际显示状态不匹配的情况～

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