博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
让你的 highcharts支持maxPointWidth属性
阅读量:6482 次
发布时间:2019-06-23

本文共 792 字,大约阅读时间需要 2 分钟。

图片描述

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

(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宽度}]

转载地址:http://cjbuo.baihongyu.com/

你可能感兴趣的文章
eclipse php快捷键,EclipsePHP Studio快捷键
查看>>
oracle查看分区索引是否可用,【Oracle】error code [1502]; ORA-01502;索引的分区处于不可用状态...
查看>>
php的魔术常量trait,PHP基础-函数和魔术常量
查看>>
linux进程间通知,linux 进程间通信之消息传递
查看>>
Linux内核哪个版本有网络,Linux内核4.4版本带来的网络新特性
查看>>
linux不待机命令,linux实现显示器不休眠
查看>>
linux内核TCP 源码分析,Linux内核源代码解析之TCP面向字节流
查看>>
linux 共享内存过大,64位Linux机器上最大可能的共享内存大小
查看>>
linux 大叶内存,hugepages大叶内存
查看>>
linux终端编程gcc,ubuntu 14.04 命令行方式gcc升级及版本切换
查看>>
android获取图片格式,android-如何获取从FileProvider类获取的图像文...
查看>>
android源码编译so文件,Android 源码中so库与对应源码路径
查看>>
android dialog指定位置,android--自己定义ProgressDialog显示位置(其他Dialog子类都能够设置)...
查看>>
android pull 间隔,GitHub - apicloudcom/UIPullRefresh: 下拉刷新模块源码(内含iOS和Android)...
查看>>
微吼直播 html5,微吼直播jssdk接入指引.pdf
查看>>
html页面字迹模糊,css3字体可以模糊吗?
查看>>
html数据渲染笔试题,面试题:js如何渲染十万条数据并不卡住界面
查看>>
html5页面怎么向上滑了,【h5页面如何制作】html5手机H5页如何使线比1像素更细?不翻页直接滑动翻页的h5是怎么制作的?关于H5页面的制作如何自己写代码?...
查看>>
番禺html5响应式网站,41个响应式HTML5免费网站模板
查看>>
NDK编译错误expected specifier-qualifier-list before...
查看>>