highchart 柱圖設置 柱子寬度 柱子間距

在使用highcharts圖表組件的時候，我們很多時候都需要用到分組或者非分組的柱形圖，如果是分組，那麼就必然會有着同一組柱子間間距問題的產生，通過這樣一篇文章，我們就可以徹底認識柱子之間間距產生問題的根本所在，從而從根本問題上解決此類問題。讓我們一起來認識這兩個小傢伙吧！

一、pointPadding

解釋：控制每列之間的距離值，當highcharts圖表寬度固定的情況下，此值越大，柱子寬度越小，反之相反。默認此值爲0.1

操作演示：

1、pointPadding = 1

view sourceprint?

1.plotOptions: {

2.series: {

3.pointPadding:1

4.}

5.},

效果圖如下：

2、pointPadding = 0.2

view sourceprint?

1.plotOptions: {

2.series: {

3.pointPadding:0.2

4.}

5.},

效果圖如下：

3、pointPadding = 0

view sourceprint?

1.plotOptions: {

2.series: {

3.pointPadding:0

4.}

5.},

效果圖如下：

通過這樣三組數據的測試，我想大家對其pointPadding屬性的認識更加深刻了的。值越小，每列間的距離就會越小，柱子就會越大。

二、groupPadding

解釋：用於填充每個值之間的間距，其實和poingPadding有一樣的效果。不過這個主要是用於對付存在分組的情況。

1、groupPadding = 0.3

view sourceprint?

1.plotOptions: {

2.series: {

3.groupPadding:0.3

4.}

5.},

效果圖如下所示：

2、groupPadding = 0

view sourceprint?

1.plotOptions: {

2.series: {

3.groupPadding:0

4.}

5.},

效果圖如下所示：