注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

网易杭州 QA Team

务实 专注 分享 做有态度的QA

 
 
 
 
 

日志

 
 

highcharts动态图  

来自阿黄   2015-06-22 16:48:16|  分类: 质量保障平台 |举报 |字号 订阅

  下载LOFTER 我的照片书  |
highcharts是一款web前端画图框架,
  • 制作的图片界面美观,基于js,运行速度快,兼容性好
  • 支持多种形状,比如折线图,柱状图,饼图等,也可以多种形状在一幅图中并存;
  • 同时支持静态图和动态图;
  • 使用简单,开源社区活跃,资料很方便上网查找
  • 还有其他很多特点...

平时工作中,用它来画静态图比较多,最近一次新的需求中,需要用它来画动态图,于是开始寻找使用范例,找到一个动态图demo,便开始了探索旅程。

前后端定义好接口之后,开始前端编码工作,由于后端数据还没准备好,只好自己通过create一些随机数来fake后端的数据来展示,动态图的制作思路是:
  • 设置1s时间周期,向服务器端发送ajax请求
  • 将ajax返回的服务器数据,调用highcharts的addpoint函数追加到当前图片的每条曲线后面
一切都很顺利,很快完成了动态效果的展示。

当后端数据准备好之后,开始进入联调,动态图可以生成,但是不幸的是,发现初始化屏幕100个点的动态曲线,随着时间的推移,会越来越少,慢慢收缩可见点数。 不得其解,然后又换成自己的fake后端数据发现,不会存在这种现象。

于是估计是后端数据可能有问题,猜想可能是后端数据没有实时返回数据。于是设置ajax的timeout为800ms,重新联调,发现前端并没有出现timeout的fail,所以问题不是处在后端返回的数据,后端确实是有实时返回数据。

调试过程中发现,每次返回的数据,每条曲线不止1个新的数据点,而是包含了前面时间的4个数据点,这样做的目的是:为了防止网络延时会导致数据包丢包。

想不到更好的办法,只好通过研究highcharts本身插件了。自己没有写过任何js插件,也没啥经验,当然全部去理解这个插件的原理,时间远远不够,所以我研究动态图片调用的addpoint函数的入口,一层层往下查看是如何动态绘图的,通过打印一些js的console.log信息,通过这种方法,总算找到了原因:
  • 每次ajax请求5个数据点,这5个点中,如果网络没有延迟,正常情况,每次都只有1个数据点是有效的,会add point,其他4个点,在之前已经add 了. 但是这5个点都会尝试去add point,highchart根据数据点的时间戳信息,如果发现point已经在图中了,将不会add。但是add操作的最后包含1个remove曲线data[0]的操作,这个操作不管时间戳是否已经在途中,都会进行。这样就导致,每次ajax请求,取回5个点,只有曲线的最后1个点add成功,曲线最前面的5个点remove了 。
之所以后端会返回5个点,前面提到过,4个重复点的存在是考虑容错性,通过增加数据冗余来减少因为网络延迟带来的误差。 

问题找到了,想到2个解决方法:
  1. 修改highcharts插件,点数不会变少,但是会有堆积现象,效果不理想,对源码无法完全理解,而且后期插件如果update,将会覆盖修改,不考虑 
  2. 增加add point操作之前的判断。每次保存一个current max timestamp,下次请求过来的5个数据,进行逐一判断,如果大于current max timestamp则add point,否则不会add point,这样能保证,每次都能成功add 上point,同时只会remove曲线上1个data[0]的点。
经实践,方法2可以解决问题,同时带来额外的好处是:绘图不再抖动,浏览器性能提高。

贴一张最终效果图:
highcharts动态图 - 网易杭州QA - 网易杭州 QA Team
 







  评论这张
 
阅读(550)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016