Highcharts 中文社区

 找回密码
 立即注册
查看: 1008|回复: 1

[技术贴] 让柱形图支持最大宽度属性的方法

[复制链接]
  • TA的每日心情
    奋斗
    5 天前
  • 签到天数: 261 天

    [LV.8]以坛为家I

    30

    主题

    874

    帖子

    4142

    积分

    版主

    Rank: 7Rank: 7Rank: 7

    积分
    4142

    最佳新人活跃会员

    QQ
    发表于 2016-4-17 17:08:19 | 显示全部楼层 |阅读模式
    本帖最后由 简数科技 于 2016-4-17 17:09 编辑

    由于柱形图的每个柱形的宽度默认是自适应的,所以当柱形图数据列比较少的时候,柱形宽度就会过大,下面是通过用插件的方式扩展 Highcharts 功能,让其支持柱形图最大宽度设置。
    主要代码如下:
    1. (function(H) {
    2.     var each = H.each;
    3.     H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function(proceed) {
    4.         var series = this;
    5.         if (series.data.length > 0) {
    6.             var width = series.barW > series.options.maxPointWidth ? series.options.maxPointWidth : series.barW;
    7.             each(this.data, function(point) {
    8.                 point.shapeArgs.x += (point.shapeArgs.width - width) / 2;
    9.                 point.shapeArgs.width = width;
    10.             });
    11.         }
    12.         proceed.call(this);
    13.     })
    14. })(Highcharts);
    复制代码

    在线实例:http://code.hcharts.cn/jianshukeji/hhhGku

    本帖被以下淘专辑推荐:

    Highcharts 中文网论坛管理团队

    我们提供:商业授权技术支持图表定制VIP服务 等相关支持服务
    在线客服:2133220776(QQ,非技术,工作日 10:00 ~ 17:00)
    新浪微博:http://weibo.com/highcharts
  • TA的每日心情
    开心
    3 天前
  • 签到天数: 728 天

    [LV.9]以坛为家II

    14

    主题

    866

    帖子

    1万

    积分

    HC 神人

    看我签名看我签名看我签名看我签名看我签名看我签名看我签名看我

    Rank: 8Rank: 8

    积分
    11479

    最佳新人活跃会员热心会员发帖之王突出贡献论坛元老

    发表于 2016-4-17 19:33:06 | 显示全部楼层
    这个好高端,好像想画啥形状都可以了~
    请用HCode:  http://code.hcharts.cn/ 创建一个在线实例重现你的问题,然后分享链接,便于共同调试。
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    快速回复 返回顶部 返回列表