在前面的章節(jié)里，我們已經(jīng)了解了圖形的基本使用方法以及圖形XML，現(xiàn)在我們已經(jīng)有能力做出基本的圖形了，如果你現(xiàn)在就把它應用到你的項目里，我認為沒有任何問題，而且我也相信你還能舉一反三地，發(fā)展出一些“新”的用法。
那我們就開始吧。
動態(tài)改變圖形的類型
在項目中，我們有時會需要在頁面上方便地改變圖形的類型，當然，如果頁面不刷新就能看到改變的結果，那是最理想的。舉個例子來說，在一個頁面上，顯示了一個月銷售額的柱狀圖，但用戶要求還可以查看月銷售額的餅圖，區(qū)域圖。要實現(xiàn)這個需求，一般的做法是，再做兩個頁面，一個顯示餅圖，一個顯示區(qū)域圖，用戶想看這兩個圖，點擊連接就可以了。這樣的做法并沒有什么不妥。你還可以采用AJAX技術，來實現(xiàn)頁面無刷新，這樣用戶的體驗會更好一些。只是程序員累一點而已。
難道我們一定要這么累嗎？不！其實我們可以有更好的辦法，前提是你采用了FCF作為你的報表解決方案。
那么，在FCF里，是怎么實現(xiàn)上面的需求的呢？簡單點說，思路是這樣的：
1、使用JavaScript加載第一個圖形（如柱狀圖），至于是用dataXML方法，還是dataURL方法，都可以。
2、當需要改變圖形類型（如改成餅圖）時，我們再創(chuàng)建一個新的FusionCharts類實例（它的SWF文件是餅圖），把它render到原來的DIV。
就是這么簡單。
我們來看看代碼吧。
<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
//數(shù)據(jù)
var strXML = "<graph caption='Hours worked' showNames='1'> <set name='Tom' value='32' color='AFD8F8'/>
<set name='Mary' value='16' color='F6BD0F'/><set name='Jane' value='42' color='8BBA00'/></graph>";
/**//*
* 當用戶單擊按鈕時調(diào)用這個方法。
* 這個方法用來使用新的SWF文件創(chuàng)建一個新的FusionCharts實例。
*/
function updateChart(chartSWF){
//Create another instance of the chart.
var chart1 = new FusionCharts(chartSWF, "chart1Id", "400", "300", "0", "0");
chart1.setDataXML(strXML);
chart1.render("chart1div");
}
</SCRIPT>
</HEAD>
<BODY>
<div id="chart1div">
FusionCharts
</div>
<script language="JavaScript">
var chart1 = new FusionCharts("../../FusionCharts/FCF_Column3D.swf", "chart1Id", "400", "300", "0", "0");
chart1.setDataXML(strXML);
chart1.render("chart1div");
</script>
<form name='frmUpdate'>
Show as:
<input type='button' value='Column' onClick="javaScript:updateChart('../../FusionCharts/FCF_Column3D.swf');" name='btnColumn' />
<input type='button' value='Line' onClick="javaScript:updateChart('../../FusionCharts/FCF_Line.swf');" name='btnLine' />
<input type='button' value='Pie' onClick="javaScript:updateChart('../../FusionCharts/FCF_Pie3D.swf');" name='btnPie' />
</form>
</CENTER>
</BODY>
</HTML>
上面的代碼非常淺顯，就不做解釋了。
動態(tài)改變圖形的數(shù)據(jù)
我們已經(jīng)會動態(tài)改變圖形的類型了，動態(tài)改變數(shù)據(jù)和上面的原來一樣，我們只需要在新建實例的時候，傳入新的數(shù)據(jù)就可以了。
那么為什么還要單獨來講解這個呢？因為FCF給我們提供了一個更簡單的方法，那就是updateChartXML(domid,data)。它的第一個參數(shù)就是我們在創(chuàng)建FusionCharts實例時設置的圖形domid，第二個參數(shù)是XML數(shù)據(jù)字符。
來看看下面的代碼。
<HTML>
<HEAD>
<TITLE>FusionCharts Free & JavaScript - Updating chart using setDataXML() Method</TITLE>
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function updateChart(DOMId){
updateChartXML(domId,"<graph><set name='A' value='32' /></graph>");
}
</SCRIPT>
</HEAD>
<BODY>
<div id="chart1div">
FusionCharts
</div>
<script language="JavaScript">
var chart1 = new FusionCharts("../../FusionCharts/FCF_Column3D.swf", "chart1Id", "400", "300");
chart1.setDataXML("<graph><set name='A' value='10' color='D64646' /><set name='B' value='11' color='AFD8F8' /></graph>");
chart1.render("chart1div");
</script>
<form name='frmUpdate'>
<input type='button' value='改變數(shù)據(jù)' onClick="javaScript:updateChart('chart1Id');" name='btnUpdate'>
</form>
</HTML>
當我們單擊”改變數(shù)據(jù)“按鈕后，會調(diào)用updateChart()方法，它會使用新的數(shù)據(jù)來重新構建圖形。
這種方案看起來，好像是比較好。然而，在前面我們說了，使用dataXML方法加載數(shù)據(jù)時，不能含有中文字符，同理，使用updateChartXML方法，也不能有中文字符。如果你要使用中文，還是用第一種方法吧。你可能會想，既然有updateChartXML方法，那是不是有updateChartURL方法呢？我們用它不就可以了嗎？是的，是有這個方法，不過，F(xiàn)usionCharts Free版本里沒有，只有FusionCharts版本里有。想用嗎？拿錢來！
下章我們來講講FCF的下鉆圖形，聽上去很專業(yè)，其實就是圖形的連接，包括超連接，JavaScript。
本文原始地址：http://ajava.org/hot/fusioncharts/876.html