Highcharts Column Range图表定制：柱高匹配Y轴间隔并消除柱间隙

嘿，我来帮你搞定这两个Column Range图表的定制需求，直接上干货：

1. 让柱子高度与Y轴刻度间隔一致 #

要实现这个效果，核心是让柱子的高度（也就是数据的low到high的差值）和Y轴的刻度间隔完全对应，再配合Y轴的配置确保刻度显示规则匹配：

• 首先设置Y轴的刻度间隔，比如你的刻度间隔是1的话，就配置：

  yAxis: {
      tickInterval: 1, // 这里设置成你需要的刻度间隔值
      startOnTick: true, // 强制Y轴从刻度线开始
      endOnTick: true, // 强制Y轴在刻度线结束
      // 其他Y轴配置（比如标题、标签等）
  }
  

• 然后调整你的数据，确保每个柱子的high - low等于tickInterval的整数倍。比如刻度间隔是1，那柱子可以是low:0, high:1（高度对应1个刻度间隔），或者low:1, high:3（高度对应2个刻度间隔），这样柱子高度就会完美匹配刻度间隔的高度。

2. 消除柱子之间的间隙 #

这个只需要在plotOptions.columnrange里调整几个参数就能搞定：

plotOptions: {
    columnrange: {
        groupPadding: 0, // 消除不同组柱子之间的间隙
        pointPadding: 0, // 消除同组内柱子之间的间隙
        borderWidth: 0, // 去掉柱子边框，避免边框带来的额外微小间隙
        pointWidth: '100%' // 让柱子占满整个分类的宽度，可选，进一步确保无间隙
    }
}

把这些配置加到你的Highcharts初始化代码里，就能得到你想要的效果啦！

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