highchart 柱圖設定 柱子寬度 柱子間距
阿新 • • 發佈：2019-02-03
在使用highcharts圖表元件的時候，我們很多時候都需要用到分組或者非分組的柱形圖，如果是分組，那麼就必然會有著同一組柱子間間距問題的產生，通過這樣一篇文章，我們就可以徹底認識柱子之間間距產生問題的根本所在，從而從根本問題上解決此類問題。讓我們一起來認識這兩個小傢伙吧！
一、pointPadding
解釋：控制每列之間的距離值，當highcharts圖表寬度固定的情況下，此值越大，柱子寬度越小，反之相反。預設此值為0.1
操作演示：
1、pointPadding = 1
1.plotOptions:
{
2.series:
{
3.pointPadding:1
4.}
5.},
效果圖如下：
2、pointPadding = 0.2
1.plotOptions:
{
2.series:
{
3.pointPadding:0.2
4.}
5.},
效果圖如下：
3、pointPadding = 0
1.plotOptions:
{
2.series:
{
3.pointPadding:0
4.}
5.},
效果圖如下：
通過這樣三組資料的測試，我想大家對其pointPadding屬性的認識更加深刻了的。值越小，每列間的距離就會越小，柱子就會越大。
二、groupPadding
解釋：用於填充每個值之間的間距，其實和poingPadding有一樣的效果。不過這個主要是用於對付存在分組的情況。
1、groupPadding = 0.3
1.plotOptions:
{
2.series:
{
3.groupPadding:0.3
4.}
5.},
效果圖如下所示：
2、groupPadding = 0
1.plotOptions:
{
2.series:
{
3.groupPadding:0
4.}
5.},
效果圖如下所示：