Angular4中Highcharts Columnrange图表消除柱间间隙问题

嘿，我看你在Angular 4项目里用Highcharts的columnrange图表，想要消除柱形之间的间隙，和目标截图样式对齐对吧？其实只需要调整几个配置项就能轻松搞定啦！

你只需要在Highcharts的配置对象中，给plotOptions.columnrange添加两个关键属性：

• pointPadding: 0：消除单个柱形自身的左右内边距
• groupPadding: 0：消除不同分组柱形之间的间距

如果你的图表不需要柱形边框，还可以加上borderWidth: 0让样式更贴合目标效果。

具体的配置代码示例如下：

plotOptions: {
  columnrange: {
    pointPadding: 0,
    groupPadding: 0,
    borderWidth: 0 // 可选，不需要边框时添加
  }
}

把这段配置整合到你现有的Highcharts选项里，柱形之间的间隙就会完全消失，和你想要的截图样式一致啦。如果是用highcharts-angular组件，直接把这个配置加到你的chartOptions对象中即可。

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