设置Hcharts柱状图柱宽的几种方法

前言

最近本人在做一个后台系统，其中有大量使用图表绘制，使用的插件是Hcharts，正好遇到其中一个柱状图需要设置柱宽，所以今天就想和大家聊一聊这个Hcharts的柱宽如何设置以及设置技巧。

正文

Hcharts这款插件真的十分强大，对于自适应做的堪称完美，会自动根据分栏的数目进行X轴坐标倾斜，而其他的一些图表插件却鲜少有能做到或者考虑到的（比如E某之类的，就不详说了），大多需要去手动设置倾斜，同时在分栏数目过多的时候，Hcharts也会自动使你的柱宽缩小同时还保持柱与柱之间还有间距，但是当我们的分栏比较少，比如只有两列柱的时候，Hcharts的自适应就稍有些不美观了，他会变得。。这么宽。。。

当看到我的柱子变成这么宽的时候，我的第一意识是：设置柱宽，于是我找了官方API文档，找到了这个：

于是我就设置上去了，然后我的柱子变成了这样：

看样子好像解决了，但是，这里我又遇到了新问题：我的X轴是动态生成的，也就是说我的分栏不一定是两列，如果是60列会怎么显示呢：

就变成了这个样子，这交付给用户还不得被领导 n+1？这样是肯定不行的，于是我想，css有个max-width属性，咱们的Hcharts有没有类似的属性呢？还真有：

那么我设置一下最大为100再试试看：

OK，这样就好了嘛（图表数据为我ctrl+c/v的，所以是这么个样子），解决！

代码

上面说了效果，那么这里咱们就得说下代码怎么写啦。
其实这个API可以设置在两个地方（需要固定柱宽把代码中的maxPointWidth更换为pointWidth即可）：
1、你可以放在数据的series属性内，设置方法如下：

          series: [{
            type: 'column',//最上
            name: '老用户回流数',
            data: that.optionList[1],
            color: "#02A7F0",
            maxPointWidth:100, //柱子宽度
          }, {
            type: 'column',//第二
            name: '新用户数',
            data: that.optionList[2],
            color: "#81D3F8",
            maxPointWidth:100, //柱子宽度
          }, {
            type: 'column',//第三
            name: '新用户流失数',
            data: that.optionList[3],
            color: "#F59A24",
            maxPointWidth:100, //柱子宽度
          }, {
            type: 'column',//最后
            name: '老用户流失数',
            data: that.optionList[4],
            color: "#FACD91",
            maxPointWidth:100, //柱子宽度
          }, {
            type: 'line',
            name: '活跃用户数',
            data: that.optionList[5],
            lineWidth: 1,
            marker: {
              lineWidth: 1,
              lineColor: "#FF6E00",
              fillColor: '#FF6E00'
            }
          }]

2、设置在plotOptions属性内：

          plotOptions: {
            series: {
              stacking: 'normal',
            },
            column : {
              maxPointWidth:50,//柱子宽度
//              pointWidth:100, //柱子宽度
            }
          },

个人比较建议使用第二种方法，因为不用写很多遍，写一次就可以了。毕竟程序员一定要“懒”，才能写出最精简和清晰的代码嘛。代码拢於可是很不好的习惯哦。

鸭鸭比心（我最近超喜欢这个表情包）

写在最后

如上就是给Hcharts柱状图设置柱宽两种方法以及两个设置区域，您可以根据您的具体需求来进行筛选使用哪个。希望这篇文档能给您带来帮助，感谢阅读。