如何防止 Highcharts 中的条形相互重叠？

Question

HIGH CHARTS

请看JSFIDDLE。这里的条相互重叠。如何通过动态调整条形宽度来防止这种情况。

Answer 1

如果可能，移除内联容器 css 高度。

Fiddle 演示

或者您可以使用滚动条 highstock.js

 xAxis: {
  categories: ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'sixth', 'seventh'],
  allowDecimals: false,
  min: 0,
  max: 4,
  scrollbar: {
    enabled: true
  },
},

Fiddle 演示

Answer 2

如果发生是因为您将条形宽度设置为固定值。如果您希望条形占据宽度的所有可用位置，而不是使用 pointWidth，请将 pointPadding 设置为 0，将 groupPadding 设置为 0，将 borderWidth 设置为 0。

API参考：
http://api.highcharts.com/highcharts/plotOptions.bar.pointPadding
http://api.highcharts.com/highcharts/plotOptions.bar.groupPadding
http://api.highcharts.com/highcharts/plotOptions.bar.borderWidth

示例：
http://jsfiddle.net/yek6g5vy/

如何防止 Highcharts 中的条形相互重叠？

How to prevent bars overlapping eachother in Highcharts?

highcharts

highcharts-ng