【原创】解决EveryChart报表组件绘制折线图Tip显示Bug

EveryChart（http://everyjs.co.cc/index.html）是一款基于JavaScript的免费Web绘制图表工具，具备体积小，速度快，使用简单；面向对象架构，扩展方便；不依赖其他框架，与jquery,mootools等JS框架兼容等特点。更主要是它支持动态增加改图表设置和良好的多浏览器支持，难能可贵的是可以对几种主流智能手机浏览器有很好的兼容性（对于这方面连自己公司的手机浏览器都有兼容问题的GoogleChart不觉得汗颜么）

 

笔者几个月前在实际项目中使用其开发发现bug两枚，经过调试找到问题原因并加以解决，现将过程和解法贴出来以供大家参考。

 

现象描述(使用的是当时的最新版0.96beta，这两天作者已更新到0.97beta版，后面会再详细说明)：

 在IE、Android自带浏览器中浏览动态网页内嵌Chart绘制的折线图过程中，如果设置了“ 'pointTip':true, ”，那么在更改源数据并进行重绘时，可引发上一次绘制的Chart显示出的Tip并不消失，并且该Tip在浏览器强制刷新之前无法获得焦点且不会消失。PC端webkit内核浏览器如Chrome、Maxthon 3无此问题。如图所示

 

解决办法：

 因为EveryChart对外发布组件为源码混淆版，无法深入源码内部进行调试和修改，通过使用浏览器调试工具对混淆源码分析，可从组件外部patch解决此问题。

 从如下图中可以看到，Chart中仍保留着前次绘图所显示Tip对应的DIV元素

 

 

 

可以看到Tip所对应的DIV直接隶属于Body，并不是包含Chart本身元素的子元素

(下图中红色方框标识部分为Chart绘制主体元素)

 

 

通过分析所得出的结论是： Tip是直接在Body下绘制的，在显示一个数据点的Tip后因为某些原因(比如该页面元素被挡住了)没能得到鼠标离开焦点的mouseout事件，这时为Chart重新传入数据参数并执行Render(),受此影响的Tip将不再响应任何事件。

 Tip的数据点部分在源码中格式如下：

 

Tip的显示值部分在源码中格式如下：

 

 

剩下的事情就是如何解决这个问题了：

其实也很简单，只要在每次重新执行render()之前，对整个文档的多余Tip进行一次清理即可，代码如下(这里用了jQuery，着重讲思路，读者用什么代码看自己实际情况而定)

 

$('body > div[style]').remove();

很简单的一句话吧~如果你要说“我body下还有其他div子元素怎么办？”。其实也很容易…你自己的div把它的样式控制放在css好吗，写个类去控制外观，终于一切都变清净了。

 

Everychart还有另一个bug，我这里简要描述一下，不做解法：

 在动态获取的数据源中如果数据源为空，在Chart绘制过程中，IE将会有一定几率弹出脚本错误，错误出在EveryChart.ie.js中，提示大意为 “XX数组必须为有效的正整数”。

 此Bug出现有随机性，一般都是Chart获取数据源为空数组所致。所用浏览器是IE8，但并不保证其他浏览器不出现Bug。因为其他内核浏览器(如webkit内核)即便JS脚本运行期出现错误，默认也不会弹出脚本错误通知，更不会出现调试信息。

 

另注：在博主完成这篇文章时EveryChart作者通知我已将组件更新到最新的0.97beta，宣称解决了上述两问题并添加部分函数，优化部分代码使绘制效率大幅提高。博主第一时间拿到新版本组件测试，确实效率高了很多，流畅性远超0.96版；很可惜的是第一个bug不仅依然存在，而且更变本加厉了，连不需兼容IE内核的版本（Chart.js）这次render都未能幸免；第二个问题由于条件限制暂时未能测试。作者希望我用新加入的print()方法进行重绘，可惜是为重绘提供数据所新增的接口函数过于简单不能满足实际需求，对新引入的架构机制看应该是应用print()方法中不存在所提的bug-1问题。

  

0.9.7 update logs


增加了setCategory方法设置坐标图的比较点的值 查看

增加了setItem方法,可配合print方法使用重新绘图 查看

增加了addData方法,添加数据,主要用来显示实时动态折线 查看

add方法更名为 addItem,表示增加数据项 查看

修正了IE7 IE8 下重新渲染后,文字丢失的bug

提高了动画渲染速度

 

文止于此，博主会就目前仍存在的问题继续和作者沟通并协助加以改进的，也欢迎大家多多交流，多关注这个组件。