FusionCharts特点及技巧参考模板_第1页
FusionCharts特点及技巧参考模板_第2页
FusionCharts特点及技巧参考模板_第3页
FusionCharts特点及技巧参考模板_第4页
FusionCharts特点及技巧参考模板_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、FusionCharts特点及技巧1.   概述FusionCharts是一个能帮你创建其引人注目的动态图像效果的Macromedia Flash控件。充分利用Macromedia Flash所具有的流畅功能来创建简洁的、交互式的和引人注目的动态图像。2.   功能描述FusionCharts是InfoSoft Global的一个产品，InfoSoft Global 公司是专业的Flash图形方案提供商，他们还有几款其他的，基于Flash技术的产品，都非常的漂亮。FusionCharts是一个跨平台，跨浏览器的flash图表组件解决方案，能够被 ASP.

2、NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面甚至PPT调用。你不需要知道任何关于flash编程的知识，你只需要知道你所用的编程语言就可以了。FusionCharts是一个闪光的图表组件，它可以用来制作数据动画图表，其中动画效果用的是Adobe Flash 8 （原Macromedia Flash的）制作的flash ， FusionCharts可用于任何网页的脚本语言类似于HTML ， .NET，ASP ， JSP技术的， PHP ， ColdFusion等，提供互动性和强大的图表。使用XML作为其数据接口， FusionC

3、harts充分利用流体美丽的Flash创建紧凑，互动性和视觉逮捕图表。3.   技术细节3.1. 不需要任何Active-X或扩展控件不需要安装任何扩展Active-X控件或组件来渲染效果。对于服务器不需要安装组件，FusionCharts能够运行的非常流畅。你只需上载核心的SWF文件到服务器中并将为其配置XML数据文件。3.2. 减少服务器负载FusionCharts能很大程度地减轻服务器的负荷，相当在客户端处理工作。由于该控件文件非常小，因此也非常适合窄频带传输。1 / 83.3. 兼容多种脚本语言FusionCharts兼容多种脚本语言：如ASP，ASP.NET,JS

4、P, PHP, Perl, CGI, CF等，如同在客户端进行处理时，无论是哪一种脚本语言通过数据访问组件都没太大关系。3.4. 改变客户端动态数据库你可以用客户端中很少的几句脚本来控制FusionCharts，也能够在客户端中建立全新的图形而不需要重新加载页面和图形。3.5. 可在图形中追加其它特征FusionCharts提供了自制的很多选项：比如透明度、色彩主题、热点选区、盘旋标题等。其最大的好处在于你能够利用XML数据文件进行自定义。 4.   FusionCharts通过四种方法给FusionCharts提供XML数据4.1. dataURL方法4.2.

5、dataXML方法4.3. JavaScript + setDataXML方法4.4.  JavaScript + setDataURL方法5. FusionCharts 目录结构说明5.1 Charts存放swf文件。5.2 JSClass存放js文件，主要是一些函数的方法调用，能够帮你用一种友好的方式把图形嵌入到html 页面。7. dataURL、dataXML处理，中文乱码解决方法，特性设置、link热区设置完整实例源码：demo.jsp<% page language="java" contentType="text/html; char

6、set=UTF-8" pageEncoding="UTF-8"%><%String area = request.getParameter("area");if (area = null) area = "1"java.util.List<java.util.HashMap> datas = dbutil.DataBase.retrieve("select qymc,ppmc,ppxl,khmx from t_khxl where qybh= '" + area + &qu

7、ot;' order by ppbh");String strXML = ""int i = 0;for (java.util.HashMap data : datas) if (i = 0) strXML += "<chart caption='" + data.get("qymc")+ "各品牌销量' xAxisName='品牌名' yAxisName='销售量(T)' numberSuffix='' showValues='

8、1' decimals='0' baseFontSize='12' enableRotation='0' formatNumberScale='0' palette='1' showFCMenuItem='1' numDivLines='10' imageSave='1'>"i = 1;/动态产生的XML文档，编码须是GBK或者gb2312String khmx = (String) data.get("khmx");khm

9、x = new String(khmx.getBytes("gb2312"), "iso-8859-1");khmx = .URLEncoder.encode(khmx, "iso-8859-1");strXML += "<set label='" + data.get("ppmc") + "' value= '" + data.get("ppxl") + "' link="javascript:m

10、yJS('" + khmx + "'," + area + ");" />"if (strXML.trim().length() > 0)strXML += "</chart>"/System.out.println(strXML);%><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">&

11、lt;title>FusionChart图表中文弹出窗口全解决</title><!- 引入FusionCharts 需要的JS脚本文件 -><script language="JavaScript" src="chartjs/JSClass/FusionCharts.js"></script><SCRIPT LANGUAGE="JavaScript"><!-function myJS(myVar,area)window.alert(myVar); /弹出窗口var

12、 Title=myVar;var Height=300;var Width=400;var dleft =(screen.availHeight-Height)/2;var dtop =(screen.availWidth-Width)/2;var sRet = window.showModalDialog("/iframe/iframe/parent.faces?id="+area,window,Title,"scrollbars=yes;resizable=yes;help=no;status=no;center=yes;dialogTop=25;dialog

13、Left="+ dleft +"dialogTop="+ dtop +"dialogHeight="+Height+"px;dialogWidth="+Width+"px;");/link='P-detailsPopUp,width=430,height=360,toolbar=no, scrollbars=no,resizable=no-/iframe/iframe/parent.faces?id=1'function myAlert(myVar)alert(myVar);/->&

14、lt;/SCRIPT></head><body><!- 通过chartXmlData传递xml数据 -><div id="chartXmlData" name="chartXmlData" style="width: 100%; height: 50px"><%=strXML%></div><div id="chartDivURL" align="center">文件XML数据源</div>&l

15、t;div id="chartDivXML" align="center">字符串XML数据源</div><script type="text/javascript"> var myChart1 = new FusionCharts("chartjs/Charts/Column3D.swf?ChartNoDataText=没有满足条件的数据!", "myChartId", "600", "450", "0"

16、, "0"); /数据文件XML存放在web应用根目录 /牢记：静态的XML文件，须包含BOM特征码 myChart1.setDataURL("DemoData.xml"); myChart1.render("chartDivURL"); var chartXMLObj = document.getElementById("chartXmlData"); var chartXML = chartXMLObj.innerHTML; /解决中文乱码的最关键一行 /有时，如果没有这一行，可能也不会有乱码 /但大多数时候会

17、有乱码，所以这行一定不能掉 /encodeURI是对chartXML进行编码 chartXML = encodeURI(chartXML); myChart1 = new FusionCharts("chartjs/Charts/Column3D.swf?ChartNoDataText=没有满足条件的数据!", "myChartId1", "600", "350", "0", "0"); /设置字符串XML数据 myChart1.setDataXML(chartXML); m

18、yChart1.render("chartDivXML"); </script></body></html>demoData.xml<graph caption='月销售' xAxisName='月份' yAxisName='数量' canvasBgAlpha='50' hoverCapSepChar=':' numDivLines='10' showNames='1' rotateNames='1' bg

19、SWF='china.gif' baseFontSize='12' decimalPrecision='0' formatNumberScale='0'> <set name='一月' value='462' color='AFD8F8' link='P-detailsPopUp,width=600,height=430,toolbar=no, scrollbars=no,resizable=no-Demo.jsp' /> <set name='二月' value='857' color='F6BD0F' link='n-demo.jsp' /> <set name='三月' value='671' color='8BBA00' link='demo.jsp' /> <set name='四月' value='494' color='FF8E46' link="ja

人人文库> 全部分类> 专业文献 > 通信电子

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论