如何缩小Highcharts中两组并列柱状图之间的间距

解决方案 #

你之前调整的参数方向有误，pointPadding控制的是同个分类下不同系列柱子的内部间距，x轴的min/max仅控制坐标轴显示范围，不会影响柱子的间距分配逻辑，调整方案如下：

• 要缩小不同分类的并列柱组之间的间距，请调整plotOptions.column.groupPadding参数，取值范围为0~1，数值越小间距越小
• 若要缩小同个分类下两组柱子的内部间距，再配合调整plotOptions.column.pointPadding参数即可

配置示例 #

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  xAxis: {
    type: 'category', // 显式指定分类轴，避免数值轴自动计算偏移
    categories: props.months // 你的月份分类数据
  },
  plotOptions: {
    column: {
      groupPadding: 0.05, // 按需调低该值即可缩小组间距，设置为0则组之间无空隙
      pointPadding: 0 // 按需调整组内两个柱子的间距
    }
  },
  series: [
    // 你的两个系列配置
  ]
})

调整前的效果参考：

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