如何在Highcharts中以少量X轴分类展示全部柱状图系列数据

我是Highcharts新手，希望保留X轴现有分类['row-1','row-2','row-3','row-4']且不扩展X轴，同时展示系列中所有的柱状图数据。已设置max:3限制X轴扩展，但尝试多种方法仍未实现预期效果。

当前TS代码：

xAxis:{
  categories:['row-1','row-2','row-3','row-4'],
  max:3
},
plotOptions:{
  column:{
    stacking:'normal'
  }
},
series:[
  {
    type:'column',
    data:[12,23,34,45,56,67,78,89,90]
  },{
    type:'column',
    data:[12,32,43,54,65,76,87,98,91]
  }
]

预期图表样式：

解决方案 #

单纯设置max:3只能限制X轴显示的最大刻度索引，但Highcharts会默认隐藏超出X轴范围的数据点。要实现固定4个分类同时展示全量数据，需调整数据格式和X轴配置：

1. 为数据点指定X轴分类索引：将每个数据点改为[x索引, 数值]格式，让多余数据重复映射到已有的4个分类上；
2. 关闭X轴自动扩展：设置endOnTick: false，避免Highcharts自动添加额外刻度；
3. 优化柱子布局：可选调整groupPadding和pointPadding，让同分类下的多根柱子更紧凑。

修改后的完整代码：

xAxis: {
  categories: ['row-1', 'row-2', 'row-3', 'row-4'],
  max: 3,
  endOnTick: false // 严格限制X轴仅显示设定的4个分类
},
plotOptions: {
  column: {
    stacking: 'normal',
    groupPadding: 0.1, // 同分类柱子间的间距
    pointPadding: 0.05 // 柱子与分类边界的间距
  }
},
series: [
  {
    type: 'column',
    data: [
      [0,12], [1,23], [2,34], [3,45],
      [0,56], [1,67], [2,78], [3,89],
      [0,90]
    ]
  }, {
    type: 'column',
    data: [
      [0,12], [1,32], [2,43], [3,54],
      [0,65], [1,76], [2,87], [3,98],
      [0,91]
    ]
  }
]

原理说明 #

• 通过[x索引, 数值]的格式，强制将所有数据点绑定到已有的4个X轴分类上，不会触发X轴的自动扩展；
• endOnTick: false配合max:3，确保X轴仅渲染设定的4个分类标签，不会因为数据点数量多而新增刻度；
• 调整间距参数可以让同分类下的多根柱子布局更合理，避免拥挤或松散。

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