Highcharts单Y轴切换需求：按测量单位自动切换显示系列

嘿，这个需求我之前刚好做过类似的，核心就是利用Highcharts的图例事件和系列可见性控制来实现不同单位系列的互斥显示，我给你详细拆解下具体步骤：

第一步：给系列标记单位属性 #

首先，我们需要给每个数据系列添加自定义的unit属性，用来区分不同的测量单位，同时设置默认显示状态（默认只显示ppb系列）：

series: [
  {
    name: 'PM2.5',
    data: [32, 45, 28, 51],
    unit: 'ug/m³',
    visible: false // 默认隐藏非ppb系列
  },
  {
    name: 'O3',
    data: [0.02, 0.03, 0.018, 0.025],
    unit: 'ppm',
    visible: false
  },
  {
    name: 'NO2',
    data: [15, 22, 18, 25],
    unit: 'ppb',
    visible: true // 默认显示ppb系列
  },
  {
    name: 'SO2',
    data: [8, 10, 7, 12],
    unit: 'ppb',
    visible: true
  }
  // 更多系列...
]

第二步：监听图例点击事件，控制系列显示隐藏 #

接下来是核心逻辑：监听图例的点击事件，阻止默认的单系列显示/隐藏行为，转而根据点击系列的单位，批量控制所有同单位系列显示，其他单位系列隐藏：

chart: {
  events: {
    legendItemClick: function(e) {
      const clickedSeries = e.target;
      const clickedUnit = clickedSeries.userOptions.unit;
      const chart = this;

      // 阻止默认的单系列切换行为，我们要全局控制
      e.preventDefault();

      // 判断当前点击的系列是否处于隐藏状态
      const isHidden = !clickedSeries.visible;

      if (isHidden) {
        // 如果点击的是隐藏的系列，显示所有同单位系列，隐藏其他单位的
        chart.series.forEach(series => {
          if (series.userOptions.unit === clickedUnit) {
            series.show();
          } else {
            series.hide();
          }
        });

        // 可选：动态更新Y轴标题，匹配当前显示的单位
        chart.yAxis[0].setTitle({ text: `浓度 (${clickedUnit})` });
      } else {
        // 如果点击的是已显示的系列，这里可以做两种处理：
        // 1. 隐藏所有同单位系列（允许空状态）
        // chart.series.forEach(series => {
        //   if (series.userOptions.unit === clickedUnit) {
        //     series.hide();
        //   }
        // });

        // 2. 至少保留一个同单位系列（禁止空状态）
        const visibleSameUnitCount = chart.series.filter(s => 
          s.userOptions.unit === clickedUnit && s.visible
        ).length;
        if (visibleSameUnitCount > 1) {
          // 同单位系列不止一个，允许隐藏当前点击的
          clickedSeries.hide();
        } else {
          // 只剩最后一个同单位系列，不允许隐藏
          return false;
        }
      }

      return false;
    }
  }
}

额外优化点 #

• Y轴动态切换：上面代码里已经加了Y轴标题的动态更新，这样用户切换单位时，Y轴标题会自动匹配当前单位，体验更好。
• 初始状态控制：如果默认需要显示多个同单位系列，只需要把这些系列的visible设为true即可。
• 图例状态同步：因为我们手动控制了系列的显示/隐藏，Highcharts会自动同步图例的选中状态，不需要额外处理。

这样整个逻辑就完全满足你的需求了：默认显示所有ppb单位的系列，当点击其他单位（比如ug/m³）的图例项时，所有ppb系列会自动隐藏，同时显示该单位的所有系列；点击已显示的图例项时，要么隐藏该系列（如果同单位还有其他显示的），要么禁止隐藏（避免无系列显示）。

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