FusionCharts Free中文开发指南 第四章--使用JavaScript加载图形
来源:互联网 发布:mac的see sheer 编辑:程序博客网 时间:2024/05/18 20:12
在上篇文章里,我们做出了第一个图形报表,我们是直接在HTML里使用<OBJECT>和<EMBED>标记来加载图形的。
<html> <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="600" height="500" id="Column3D" > <param name="movie" value="../FusionCharts/FCF_Column3D.swf" /> <param name="FlashVars" value="&dataURL=Data.xml&chartWidth=600&chartHeight=500"> <param name="quality" value="high" /> <embed src="../FusionCharts/FCF_Column3D.swf" flashVars="&dataURL=Data.xml&chartWidth=600&chartHeight=500" quality="high" width="600" height="500" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> </html>
实际上,我们还可以使用FCF提供的一个JavaScript类来加载图形。使用JavaScript的方式有几个好处,一是代码量大大减少,特别是当一个页面上有几个图形时。二是代码更加直观。三是可以避免IE出现“单击以激活使用这个控件”的提示。
使用JS加载
这个JS类文件就在FusionChartsFree>JSClass文件夹下,我们把它拷贝到c:\FusionCharts\FusionCharts下面。
现在,我们把原来的Chart.html复制一份,命名为JSChart.html。这样做是为了避免直接在Chart.html上进行修改,因为以后还要用到Chart.html,
下面就是JSChart.html的代码。
<html> <head> <script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script> </head> <body bgcolor="#ffffff"> <div id="chartdiv" align="center">图形将出现这个DIV里,到时这里的字将被图形替代。</div> <script type="text/javascript"> var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500"); myChart.setDataURL("Data.xml"); myChart.render("chartdiv"); </script> </body> </html>
我们对上面的代码进行以下解释。
首先,我们用下面的语句来加载FusionCharts.js文件。
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
然后,我们定义了一个DIV,它还有个id。
<div id="chartdiv" align="center">图形将出现这个DIV里,到时这里的字将被图形替代。</div>
我们的图形就出现在这个DIV里。
接着,我们用四个参数建立了一个FusionCharts对象,
var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500");
第一个参数是SWF文件的地址。
第二个是图形的id。这个id你可以随便叫什么,但是要注意,在后面我们讲到一个页面里有多个图形的时候,这个id一定要是唯一的。
第三个参数是图形的宽。
第四个参数是图形的高。
我们还要设置数据文件的地址。
myChart.setDataURL("Data.xml");
最后,我们把图形渲染在指定的地方。
myChart.render("chartdiv");
"chartdiv"就是前面的DIV的id,这就表示把图形render到"chartdiv"。
现在你运行JSChart.html,你会看到同Chart.html一样的效果。很显然使用JavaScript加载图形,更方便,更直观。
多图形
有时候我们需要在一个页面里显示多个图形,例如,我们同时以饼图、柱状图、曲线图、区域图四中形式来表现每个月的销售情况,让用户想看哪个就看哪个。
怎么加载多个图形呢?很简单,看下面。
<html> <head><title>多图形</title> <script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script> </head> <body bgcolor="#ffffff"> <div id="chartdiv1" align="center">First Chart Container Pie 3D</div> <script type="text/javascript"> var myChart1 = new FusionCharts("../FusionCharts/FCF_pie3D.swf", "myChartId1", "600", "400"); myChart1.setDataURL("Data.xml"); myChart1.render("chartdiv1"); </script> <div id="chartdiv2" align="center">Second Chart Container Column 3D</div> <script type="text/javascript"> var myChart2 = new FusionCharts("../FusionCharts/FCF_Column3D.swf","myChartId2", "600","300"); myChart2.setDataURL("Data.xml"); myChart2.render("chartdiv2"); </script> <div id="chartdiv3" align="center">Third Chart Container Line 2D</div> <script type="text/javascript"> var myChart3 = new FusionCharts("../FusionCharts/FCF_line.swf", "myChartId3", "600", "300"); myChart3.setDataURL("Data.xml"); myChart3.render("chartdiv3"); </script> <div id="chartdiv4" align="center">Fourth Chart Container Area 2D</div> <script type="text/javascript"> var myChart4 = new FusionCharts("../FusionCharts/FCF_area2D.swf", "myChartId4", "400", "250"); myChart4.setDataURL("Data.xml"); myChart4.render("chartdiv4"); </script> </body> </html>
仔细对比上面的四个图形代码,其实就是div的id,FusionCharts对象的名称,图形的id,还有图形的SWF地址这些地方发生了变化。最后的效果如下:
图片1
下篇文章本道将讲述如何使用非独立的数据文件作为数据来源。
- FusionCharts Free中文开发指南 第四章--使用JavaScript加载图形
- FusionCharts Free中文开发指南 第三章--FusionCharts Free我的第一个图形
- FusionCharts Free中文开发指南 第六章--FusionCharts Free图形的基本元素
- FusionCharts Free中文开发指南 第七章--使用XML来创建和控制图形
- FusionCharts Free中文开发指南 第二章--FusionCharts Free安装
- FusionCharts Free中文开发指南 第五章--使用dataXML加载数据
- FusionCharts Free中文开发指南
- FusionCharts Free中文开发指南 第九章--动态改变图形的类型和数据
- FusionCharts Free中文开发指南 第一章--FusionCharts Free介绍
- FusionCharts Free中文开发指南 第八章--FusionCharts Free和组合图XML
- FusionCharts Free中文开发指南[使用文档教程]第十一章--FCF中的基本数字格
- FusionCharts Free中文开发指南 第十四章--在JSP里使用FCF
- FCF中文指南-第三章--FusionCharts Free我的第一个图形
- FCF中文指南-第六章--FusionCharts Free图形的基本元素
- FusionCharts Free中文开发指南 第十章--FCF中的下钻
- FusionCharts Free中文开发指南 第十一章--FCF中的基本数字格式
- FusionCharts Free中文开发指南 第十二章--FCF中的特殊字符
- FusionCharts Free中文开发指南 第十三章--间断数据的处理
- Google的Objective-C编码规范
- IO多路复用学习笔记
- 在windows下使用MinGW编译ffmpeg0.6
- 实现C语言 itoa函数
- Android ListView getView疯狂调用的解决办法
- FusionCharts Free中文开发指南 第四章--使用JavaScript加载图形
- [Oracle]学习Oracle数据库的简单笔记(未完待续)
- bool?与bool转化
- sql多表分组查询
- c/c++笔试题目(林锐)
- Android 安全机制
- 在初始化列表中,成员变量的初始化顺序是其在类中声明顺序,而非列表中的顺序。
- FusionCharts Free中文开发指南 第五章--使用dataXML加载数据
- tar 压缩与解压缩打包命令