在上篇文章裡，我們做出了第一個圖形報表，我們是直接在HTML裡使用<OBJECT>和<EMBED>標記來載入圖形的（FusionCharts Free使用文檔教程第三章-FusionCharts Free我的第一個圖形）。實際上，我們還可以使用FCF提供的一個JavaScript類來載入圖形。使用JavaScript的方式有幾個好處，一是代碼量大大減少，特別是當一個頁面上有幾個圖形時。二是代碼更加直觀。三是可以避免IE出現“單擊以啟用使用這個控制項”的提示。
使用JS載入
這個JS類檔案就在FusionChartsFree>JSClass檔案夾下，我們把它拷貝到c:\FusionCharts\FusionCharts下面。
現在，我們把原來的Chart.html複製一份，命名為JSChart.html。這樣做是為了避免直接在Chart.html上進行修改，因為以後還要用到Chart.html，
下面就是JSChart.html的代碼。
view sourceprint?
03 |
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script> |
05 |
<body bgcolor="#ffffff"> |
06 |
<div id="chartdiv" align="center">圖形將出現這個DIV裡，到時這裡的字將被圖形替代。</div> |
07 |
<script type="text/javascript"> |
08 |
var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500"); |
09 |
myChart.setDataURL("Data.xml"); |
10 |
myChart.render("chartdiv"); |
我們對上面的代碼進行以下解釋。
首先，我們用下面的語句來載入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載入圖形，更方便，更直觀。
多圖形
有時候我們需要在一個頁面裡顯示多個圖形，例如，我們同時以餅圖、柱狀圖、曲線圖、地區圖四中形式來表現每個月的銷售情況，讓使用者想看哪個就看哪個。
怎麼載入多個圖形呢？很簡單，看下面。
view sourceprint?
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script> |
<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"); |
<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"); |
<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"); |
<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"); |
仔細對比上面的四個圖形代碼，其實就是div的id，FusionCharts對象的名稱,圖形的id，還有圖形的SWF地址這些地方發生了變化。最後的效果如下：
相關文檔：FusionCharts3v破解版下載
FusionCharts參數的詳細說明和功能特性
FusionCharts Free使用文檔教程第一章--FusionCharts Free介紹
FusionCharts Free使用文檔教程第二章-FusionCharts Free安裝
FusionCharts Free使用文檔教程第三章-FusionCharts Free我的第一個圖形
本文地址：http://www.cnblogs.com/ATree/archive/2010/06/22/FusionCharts-Free-JavaScript.html
