OFC2和第三方JS的冲突

  • 格式:doc
  • 大小:82.00 KB
  • 文档页数:18

本文的重点就是解决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

Open Flash Chart 2 demo Hello World ofc2

Hello World ofc2

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

<%@ page language="java" contentType="text/html; charset=UTF-8"%> Open Flash Chart 2 demo Hello World ofc2

Hello World ofc2

display data 1 || display data 2

运行结果示例图:

【二】、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))

<%@ page language="java" contentType="text/html; charset=UTF-8"%> Open Flash Chart 2 demo