在使用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.
},
效果图如下所示: