[AJava原创]FusionCharts Free中文开发指南[使用文档教程]第四章--FusionCharts Free使用JavaScript加载图形

[AJava原创]FusionCharts Free中文开发指南[使用文档教程]第四章--FusionCharts Free使用JavaScript加载图形

在上篇文章里，我们做出了第一个图形报表，我们是直接在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

下篇文章本道将讲述如何使用非独立的数据文件作为数据来源。

本文原始地址： http://ajava.org/hot/fusioncharts/871.html

 转载请以连接方式注明来自 AJava.org