Highcharts是否支持在不同x轴坐标位置展示数量不等的分组列？

Highcharts完全支持该需求，你遇到的偏移、重叠问题是默认柱状图配置适配固定列数场景导致的，调整对应配置即可解决，推荐以下两种实现方案：

方案1：多series优化（适配现有逻辑，改动最小） #

你之前的多series写法只需要补充几个配置就能解决偏移、交互问题：

• 关闭默认分组占位：设置plotOptions.column.grouping = false，Highcharts就不会为每个series在所有x轴位置预留空白位置
• 开启分类居中：设置plotOptions.column.centerInCategory = true，同一x分类下的所有柱子会整体居中对齐，不会偏移
• 隐藏不需要的图例：给不需要展示在图例的series加上showInLegend: false配置
• 自定义悬停交互：通过tooltip.shared = true或者自定义tooltip formatter实现同一分类下数据的关联展示

示例代码：

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  xAxis: {
    categories: ['group 0', 'group 1', 'group 2', 'group 3', 'group 4', 'group 5', 'group 6']
  },
  plotOptions: {
    column: {
      grouping: false,
      centerInCategory: true,
      pointPadding: 0.1, // 调整柱子之间的间距
      groupPadding: 0.2 // 调整分类组两侧的间距
    }
  },
  series: [
    {data: [{x: 0,y: 10}, {x: 1,y: 20}, {x: 5,y: 15}, {x: 2,y: 10}, {x: 3,y: 40}, {x: 6,y: 20}]},
    {data: [{x: 1,y: 10},  {x: 5,y: 10} ], showInLegend: false},
    {data: [{x: 1,y: 19}], showInLegend: false},
    {data: [{x: 1,y: 10}], showInLegend: false},
  ]
});

方案2：单series实现（避免多series交互问题） #

如果不想维护多series，可以在单series中为每个数据点单独设置pointPlacement属性手动调整位置，同时设置合适的pointWidth避免重叠，适合分类下最多列数固定的场景：

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  xAxis: {
    categories: ['group 0', 'group 1', 'group 2', 'group 3', 'group 4', 'group 5', 'group 6']
  },
  plotOptions: {
    column: {
      pointWidth: 20 // 统一设置柱子宽度
    }
  },
  series: [{ 
    data: [
      {x: 0,y: 10}, 
      {x: 1,y: 20, pointPlacement: -0.3}, 
      {x: 1,y: 10, pointPlacement: -0.1}, 
      {x: 1,y: 19, pointPlacement: 0.1}, 
      {x: 1,y: 10, pointPlacement: 0.3}, 
      {x: 2,y: 10}, 
      {x: 3,y: 40}, 
      {x: 5,y: 15, pointPlacement: -0.15}, 
      {x: 5,y: 10, pointPlacement: 0.15}, 
      {x: 6,y: 20}
    ]
  }]
});

两种方案都可以实现不同x分类下列数不等的柱状图效果，可根据实际业务场景选择。

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