highchart 柱图设置 柱子宽度 柱子间距

在使用highcharts图表组件的时候，我们很多时候都需要用到分组或者非分组的柱形图，如果是分组，那么就必然会有着同一组柱子间间距问题的产生，通过这样一篇文章，我们就可以彻底认识柱子之间间距产生问题的根本所在，从而从根本问题上解决此类问题。让我们一起来认识这两个小家伙吧！

一、pointPadding

解释：控制每列之间的距离值，当highcharts图表宽度固定的情况下，此值越大，柱子宽度越小，反之相反。默认此值为0.1

操作演示：

1、pointPadding = 1

view source print ?

1. plotOptions: {

2. series: {

3. pointPadding:1

4. }

5. },

效果图如下：

2、pointPadding = 0.2

view source print ?

1. plotOptions: {

2. series: {

3. pointPadding:0.2

4. }

5. },

效果图如下：

3、pointPadding = 0

view source print ?

1. plotOptions: {

2. series: {

3. pointPadding:0

4. }

5. },

效果图如下：

通过这样三组数据的测试，我想大家对其pointPadding属性的认识更加深刻了的。值越小，每列间的距离就会越小，柱子就会越大。

二、groupPadding

解释：用于填充每个值之间的间距，其实和poingPadding有一样的效果。不过这个主要是用于对付存在分组的情况。

1、groupPadding = 0.3

view source print ?

1. plotOptions: {

2. series: {

3. groupPadding:0.3

4. }

5. },

效果图如下所示：

2、groupPadding = 0

view source print ?

1. plotOptions: {

2. series: {

3. groupPadding:0

4. }

5. },

效果图如下所示：