如何在Highcharts同步图表中仅显示一个X轴？

嘿，这个需求我之前刚好处理过，其实实现起来挺简单的！核心思路就是让主图表保留可见的X轴，其他需要同步的子图表隐藏X轴，同时确保所有图表的X轴核心配置（比如刻度、数据范围）保持一致，这样既能保证图表间的同步联动效果，又只显示单个X轴。

下面是具体的实现步骤和代码示例：

1. 配置主图表的可见X轴 #

首先给作为“基准”的主图表配置正常可见的X轴，保留你需要的样式、刻度或分类：

// 主图表配置示例
const mainChart = Highcharts.chart('main-chart-container', {
  chart: {
    type: 'line'
  },
  xAxis: {
    visible: true, // 关键：保持X轴可见
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], // 示例分类
    tickPositioner: function() { // 自定义刻度（可选）
      return this.tickPositions;
    }
  },
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
  }]
});

2. 配置子图表的隐藏X轴 #

对于其他需要和主图表同步的子图表，直接将X轴设置为不可见，同时必须和主图表保持相同的X轴核心配置（比如分类、数据范围），这样同步时才不会错位：

// 子图表1配置示例
const subChart1 = Highcharts.chart('sub-chart-1-container', {
  chart: {
    type: 'column'
  },
  xAxis: {
    visible: false, // 关键：隐藏X轴
    categories: mainChart.xAxis[0].categories, // 和主图表共享分类
    min: mainChart.xAxis[0].min,
    max: mainChart.xAxis[0].max
  },
  series: [{
    data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1]
  }]
});

// 子图表2配置示例（同理）
const subChart2 = Highcharts.chart('sub-chart-2-container', {
  chart: {
    type: 'area'
  },
  xAxis: {
    visible: false,
    categories: mainChart.xAxis[0].categories,
    min: mainChart.xAxis[0].min,
    max: mainChart.xAxis[0].max
  },
  series: [{
    data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5]
  }]
});

3. 实现图表间的X轴同步逻辑 #

接下来需要添加同步逻辑，确保主图表的X轴范围（缩放、平移）变化时，子图表也能同步更新。这里通过监听X轴的setExtremes事件来实现：

function syncXAxisExtremes(e) {
  const currentChart = this.chart;

  // 避免循环触发同步事件
  if (e.trigger !== 'syncExtremes') {
    // 遍历所有图表，同步X轴范围
    Highcharts.each(Highcharts.charts, function(chart) {
      if (chart !== currentChart && chart.xAxis[0]) {
        chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
      }
    });
  }
}

// 给所有图表的X轴绑定同步事件
mainChart.xAxis[0].on('setExtremes', syncXAxisExtremes);
subChart1.xAxis[0].on('setExtremes', syncXAxisExtremes);
subChart2.xAxis[0].on('setExtremes', syncXAxisExtremes);

关键注意事项 #

• 保持X轴配置一致性：所有同步图表的X轴必须使用相同的数据源（分类或数值范围），否则同步时会出现数据错位的问题。
• 避免循环触发：在同步函数中加入trigger !== 'syncExtremes'的判断，防止子图表同步时再次触发主图表的事件，造成无限循环。
• 响应式适配：如果需要支持窗口大小调整，Highcharts会自动处理主图表的X轴重绘，同步逻辑会自动同步到子图表，不需要额外配置。

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