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

设置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柱状图设置柱宽两种方法以及两个设置区域，您可以根据您的具体需求来进行筛选使用哪个。希望这篇文档能给您带来帮助，感谢阅读。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！