在上篇文章里，我們做出了第一個圖形報(bào)表，我們是直接在HTML里使用<OBJECT>和<EMBED>標(biāo)記來加載圖形的。
<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>
實(shí)際上，我們還可以使用FCF提供的一個JavaScript類來加載圖形。使用JavaScript的方式有幾個好處，一是代碼量大大減少，特別是當(dāng)一個頁面上有幾個圖形時。二是代碼更加直觀。三是可以避免IE出現(xiàn)“單擊以激活使用這個控件”的提示。
使用JS加載
這個JS類文件就在FusionChartsFree>JSClass文件夾下，我們把它拷貝到c:\FusionCharts\FusionCharts下面。
現(xiàn)在，我們把原來的Chart.html復(fù)制一份，命名為JSChart.html。這樣做是為了避免直接在Chart.html上進(jìn)行修改，因?yàn)橐院筮€要用到Chart.html，
下面就是JSChart.html的代碼。
<html>
<head>
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
</head>
<body bgcolor="#ffffff">
<div id="chartdiv" align="center">圖形將出現(xiàn)這個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>
我們對上面的代碼進(jìn)行以下解釋。
首先，我們用下面的語句來加載FusionCharts.js文件。
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
然后，我們定義了一個DIV，它還有個id。
<div id="chartdiv" align="center">圖形將出現(xiàn)這個DIV里，到時這里的字將被圖形替代。</div>
我們的圖形就出現(xiàn)在這個DIV里。
接著，我們用四個參數(shù)建立了一個FusionCharts對象，
var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500");
第一個參數(shù)是SWF文件的地址。
第二個是圖形的id。這個id你可以隨便叫什么，但是要注意，在后面我們講到一個頁面里有多個圖形的時候，這個id一定要是唯一的。
第三個參數(shù)是圖形的寬。
第四個參數(shù)是圖形的高。
我們還要設(shè)置數(shù)據(jù)文件的地址。
myChart.setDataURL("Data.xml");
最后，我們把圖形渲染在指定的地方。
myChart.render("chartdiv");
"chartdiv"就是前面的DIV的id，這就表示把圖形render到"chartdiv"。
現(xiàn)在你運(yùn)行JSChart.html，你會看到同Chart.html一樣的效果。很顯然使用JavaScript加載圖形，更方便，更直觀。
多圖形
有時候我們需要在一個頁面里顯示多個圖形，例如，我們同時以餅圖、柱狀圖、曲線圖、區(qū)域圖四中形式來表現(xiàn)每個月的銷售情況，讓用戶想看哪個就看哪個。
怎么加載多個圖形呢？很簡單，看下面。
<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>
仔細(xì)對比上面的四個圖形代碼，其實(shí)就是div的id，F(xiàn)usionCharts對象的名稱,圖形的id，還有圖形的SWF地址這些地方發(fā)生了變化。最后的效果如下：
圖片1
下篇文章本道將講述如何使用非獨(dú)立的數(shù)據(jù)文件作為數(shù)據(jù)來源。
本文原始地址：http://ajava.org/hot/fusioncharts/871.html