设置Highchart柱子最大宽度( 让 highcharts支持maxPointWidth属性)

发布时间:2017-4-27 5:40:02 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"设置Highchart柱子最大宽度( 让 highcharts支持maxPointWidth属性) ",主要涉及到设置Highchart柱子最大宽度( 让 highcharts支持maxPointWidth属性) 方面的内容,对于设置Highchart柱子最大宽度( 让 highcharts支持maxPointWidth属性) 感兴趣的同学可以参考一下。

我们在设置图表时候经常会动态设置数据列的宽度,但是如果数量较少的话,经常会比较难看,于是我们会想到限制一个最大宽度。这段代码应该适合你。

 (function(H) {     var each = H.each;     H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function(proceed) {         var series = this;         if (series.data.length > 0) {             var width = series.barW > series.options.maxPointWidth ? series.options.maxPointWidth : series.barW;             each(this.data, function(point) {                 point.shapeArgs.x += (point.shapeArgs.width - width) / 2;                 point.shapeArgs.width = width;             });         }         proceed.call(this);     }) })(Highcharts);

添加完代码后,在你的Highcharts属性里增加这个,设置就可以完成对最大宽度的支持了。

 
series: [{  // ....    data: data['series']['stars'],    tooltip: {        valueSuffix: ' 颗'    },    maxPointWidth: 30,  //  最大宽度 采用svg宽度}]

或者设置

plotOptions: {

column: {
    cursor: 'pointer',
    pointPadding: 0.2,
    borderWidth: 0,
    //pointWidth: 30,
   maxPointWidth: 100 // 设置最大宽度

     }

        }

 

上一篇:源码学习 系列
下一篇:相机位姿估计1_1:OpenCV:solvePnP二次封装与性能测试

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款