Highcharts多X轴关联需求：系列关联双X轴且隐藏系列不隐藏轴

问题背景 #

我们使用Highcharts的spline图表，配置了两个X轴：

xAxis: [
  {
    categories: formattedValues,
  },
  {
    categories: axisFiltered,
  },
],

现有数据系列如下：

series: [
  {
    name: `Satisfaction`,
    data: formattedValues,
  },
  {
    name: `Bottom`,
    data: formattedBottomValues,
  },
  {
    name: `Top`,
    data: formattedTopValues,
  },
  {
    name: `$Average`,
    data: formattedAverageValues,
  },
],

我们原本希望每个数据系列同时关联两个X轴，但Highcharts系列仅支持关联单个X轴，只能按如下方式配置：

series: [
  {
    name: `Satisfaction`,
    data: formattedValues,
    xAxis: 1
  },
  {
    name: `Bottom`,
    data: formattedBottomValues,
    xAxis: 0
  },
  {
    name: `Top`,
    data: formattedTopValues,
    xAxis: 1
  },
  {
    name: `$Average`,
    data: formattedAverageValues,
    xAxis: 0
  },
],

该配置存在问题：点击图例隐藏某个系列时，其关联的X轴会被一并隐藏，但我们需要X轴始终显示以服务其他系列。

解决方案 #

方法1：启用X轴的showEmpty属性 #

在X轴配置中添加showEmpty: true，强制轴在没有关联可见系列时依然显示，这是官方推荐的最简方案：

xAxis: [
  {
    categories: formattedValues,
    showEmpty: true
  },
  {
    categories: axisFiltered,
    showEmpty: true
  },
],

方法2：监听图例点击事件强制显示X轴 #

若需自定义逻辑，可通过legendItemClick事件确保轴始终可见：

plotOptions: {
  series: {
    events: {
      legendItemClick: function () {
        const chart = this.chart;
        chart.xAxis.forEach(axis => axis.show());
        return true; // 保留系列默认显示/隐藏行为
      }
    }
  }
}

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