Open Flash Chart2实现动态曲线图小结

很久前写过一篇Open Flash Chart2初步应用,刚接触的可以看看这篇文章。
最近为了实现动态曲线图展示的功能,对Open Flash Chart2又小小研究了下,研究和整合过程中遇到的各种各样的问题,现在对重点问题的解决方法在此总结下,方便自己日后回顾,也希望能给有同样需求的同仁们提供帮助。

本文的重点就是解决OFC2和第三方JS的冲突,基本目录结构:
[一]、Open Flash Chart2中javascript基本方法的介绍
[二]、OFC2与Prototype.js的冲突解决
[三]、OFC2与Ext.Viewport的冲突解决
[四]、动态流量曲线图的demo
ps:
1.本文demo是在tomcat下发布后测试的,涉及的到部分html页面是不能脱离Web应用服务器
2.demo中的有关js、swf的路径请根据自己项目的路径具体情况调整

【一】OFC2的javascript基本方法
open_flash_chart_data() 将画图的数据以string的方式传递给chart
ofc_ready() 数据加载好后会执行这个函数的
具体的作用及执行顺序可以试着运行下面这个demo页面:ofc2ChartDemoJs.html

运行结果示例图:

OFC2提供function load()方法,可以更新chart的数据,接下来的动态曲线图,也是基于这个方法来实现的,我们先看一个简单的ofc2ChartDemoLoad.jsp

运行结果示例图:

【二】、OFC2与prototype.js冲突问题
在我实验的过程中发现,如果只是第一次加载flash,运用函数swfobject.embedSWF(),设置参数”data-file”加载后台json数据时,flash能正常画出曲线图和prototype、jquery没有冲突,IE、FF都能正常显示。但是如果需要调用上面介绍的 load(JSON.stringify(data))这个方法重新画图时会失败,具体现象:在IE下chart不会更新数据,在FF下chart会消失。最后发现JSON.stringify(data) 和prototype.js中的JSON转化为string的方法冲突引起的(prototype1.6.0.3和1.6.1都有冲突),最开始是怀疑json2.js和prototype.js的JSON.stringify(data)转化后的格式不一致引起的,在接下来的测试和调试中发现转化后的格式的确不一致,但这个发现不是问题的根源,最后找了一个折中的方法解决了这个问题

  • 先把json2.js这个文件从页面中里移除
  • 然后load(JSON.stringify(chartdata))改成load(Object.toJSON(chartdata))

【三】OFC2与Ext.Viewport的冲突问题
如果你的页面里用到了Ext.Viewport来布局,会发现在IE下findSWF(‘ofc2_id’).load(Object.toJSON(chartdata));再一次的发生了杯具,FF下一切正常,而在IE下页面会有js错误提示:“未指明的错误”,这个错误的原因至今没有找到,js debug以及后来查了很多资料也没有确切结果,最后在ext的论坛上找了一个有关该问题的讨论,提供了一个扩展js库uxmedia,可以解决该问题,
相关讨论的帖子:http://www.sencha.com/forum/showthread.php?23983-ux.Media-.Flash-Flex-Components-2.1.2
uxmedia的官网:http://code.google.com/p/uxmedia/
uxmedia API doc:http://uxdocs.theactivegroup.com/
基本的解决方法:

  • 导入uxmedia的相关js文件要注意文件的先后顺序
  • 用Ext.ux.Chart.OFC.Component创建flash chart
  • 修改更新数据的相关方法:把findSWF(ofc2_chart_id).load(JSON.stringify(chartdata))改成:
      •  Ext.getDom(ofc2_chart_id).load(Object.toJSON(chartdata));//prototype.js
        Ext.getDom(ofc2_chart_id).load(JSON.stringify(chartdata));//json2.js

页面代码片段:

效果图如下:

【四】动态曲线的简单demo代码
实时流量动态图的效果如上,基本实现的代码如下,demo是个随机数模拟流量的(有关snmp采集端口流量的代码就不在这里贴出了 ):
FlowChart2Vo .java

DrawOfc2RealTimeDemoAction.java:

 

原创文章,转载请注明: 转载自micmiu – 软件开发+生活点滴[ http://www.micmiu.com/ ]

本文链接地址: http://www.micmiu.com/opensource/ofc/ofc2-dynamic/

发表评论?

4 条评论。

  1. 你好,我想实现线性曲线图的效果。你上面给的例子中没有给全部的引入。我对ext不了解,请问怎么实现。能给我介绍下需要引入哪些完整的东西嘛?

    • 你如果不是用ext框架的,不需要这么复杂(我这个blog主要是解决它和ext冲突的),
      具体实现只要到官网看看demo即可了

  2. 你好,我现在在做snmp实时流量的采集,看了你这篇文章“动态曲线的简单demo代码”部分,感觉很我做的功能非常相似。想请教一个问题,x轴的时间点能否都显示成整点?比如03:10,03:20,03:30类似这样?

回复给 Michael ¬
取消回复


注意 - 你可以用以下 HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">