在前面的章節(jié)里，我們已經(jīng)了解了圖形的基本使用方法以及圖形XML，現(xiàn)在我們已經(jīng)有能力做出基本的圖形了，如果你現(xiàn)在就把它應(yīng)用到你的項(xiàng)目里，我認(rèn)為沒有任何問題，而且我也相信你還能舉一反三地，發(fā)展出一些“新”的用法。
那我們就開始吧。
動(dòng)態(tài)改變圖形的類型
在項(xiàng)目中，我們有時(shí)會(huì)需要在頁面上方便地改變圖形的類型，當(dāng)然，如果頁面不刷新就能看到改變的結(jié)果，那是最理想的。舉個(gè)例子來說，在一個(gè)頁面上，顯示了一個(gè)月銷售額的柱狀圖，但用戶要求還可以查看月銷售額的餅圖，區(qū)域圖。要實(shí)現(xiàn)這個(gè)需求，一般的做法是，再做兩個(gè)頁面，一個(gè)顯示餅圖，一個(gè)顯示區(qū)域圖，用戶想看這兩個(gè)圖，點(diǎn)擊連接就可以了。這樣的做法并沒有什么不妥。你還可以采用AJAX技術(shù)，來實(shí)現(xiàn)頁面無刷新，這樣用戶的體驗(yàn)會(huì)更好一些。只是程序員累一點(diǎn)而已。
難道我們一定要這么累嗎？不！其實(shí)我們可以有更好的辦法，前提是你采用了FCF作為你的報(bào)表解決方案。
那么，在FCF里，是怎么實(shí)現(xiàn)上面的需求的呢？簡單點(diǎn)說，思路是這樣的：
1、使用JavaScript加載第一個(gè)圖形（如柱狀圖），至于是用dataXML方法，還是dataURL方法，都可以。
2、當(dāng)需要改變圖形類型（如改成餅圖）時(shí)，我們再創(chuàng)建一個(gè)新的FusionCharts類實(shí)例（它的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>";
/**//*
* 當(dāng)用戶單擊按鈕時(shí)調(diào)用這個(gè)方法。
* 這個(gè)方法用來使用新的SWF文件創(chuàng)建一個(gè)新的FusionCharts實(shí)例。
*/
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>
上面的代碼非常淺顯，就不做解釋了。
動(dòng)態(tài)改變圖形的數(shù)據(jù)
我們已經(jīng)會(huì)動(dòng)態(tài)改變圖形的類型了，動(dòng)態(tài)改變數(shù)據(jù)和上面的原來一樣，我們只需要在新建實(shí)例的時(shí)候，傳入新的數(shù)據(jù)就可以了。
那么為什么還要單獨(dú)來講解這個(gè)呢？因?yàn)镕CF給我們提供了一個(gè)更簡單的方法，那就是updateChartXML(domid,data)。它的第一個(gè)參數(shù)就是我們在創(chuàng)建FusionCharts實(shí)例時(shí)設(shè)置的圖形domid，第二個(gè)參數(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>
當(dāng)我們單擊”改變數(shù)據(jù)“按鈕后，會(huì)調(diào)用updateChart()方法，它會(huì)使用新的數(shù)據(jù)來重新構(gòu)建圖形。
這種方案看起來，好像是比較好。然而，在前面我們說了，使用dataXML方法加載數(shù)據(jù)時(shí)，不能含有中文字符，同理，使用updateChartXML方法，也不能有中文字符。如果你要使用中文，還是用第一種方法吧。你可能會(huì)想，既然有updateChartXML方法，那是不是有updateChartURL方法呢？我們用它不就可以了嗎？是的，是有這個(gè)方法，不過，F(xiàn)usionCharts Free版本里沒有，只有FusionCharts版本里有。想用嗎？拿錢來！
下章我們來講講FCF的下鉆圖形，聽上去很專業(yè)，其實(shí)就是圖形的連接，包括超連接，JavaScript。
本文原始地址：http://ajava.org/hot/fusioncharts/876.html