FusionCharts Free使用文档教程第四章-FusionCharts Free使用JavaScript加载图形.docVIP

在上篇文章里，我们做出了第一个图形报表，我们是直接在HTML里使用OBJECT和EMBED标记来加载图形的（FusionCharts Free使用文档教程第三章-FusionCharts Free我的第一个图形）。实际上，我们还可以使用FCF提供的一个JavaScript类来加载图形。使用JavaScript的方式有几个好处，一是代码量大大减少，特别是当一个页面上有几个图形时。二是代码更加直观。三是可以避免IE出现“单击以激活使用这个控件”的提示。 使用JS加载 这个JS类文件就在FusionChartsFreeJSClass文件夹下，我们把它拷贝到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 headtitle多图形/title script language=JavaScript src=../FusionCharts/FusionCharts.js/script /head body bgcolor=#ffffff div id=chartdiv1 align=centerFirst Chart Container Pie 3D/div script type=text/javascript var myChart1 = new FusionCharts(../FusionCharts/FCF_pie3D.swf, myChartId1, 600, 400); myChart1.setDataURL(Data.xml);