?

????來看一個使用dataURL方式指定圖表數(shù)據(jù)源的例子：??

<div?id="chartdiv"?align="center"></div>
<script?type="text/javascript">
????var?chart?=?new?FusionCharts("../Charts/FCF_Column2D.swf",?"ChartId",?"600",?"350");
????chart.setDataURL("Data/Column2D.xml");
????chart.render("chartdiv");
</script>

?

?????主要的代碼是一段js腳本，首先聲明并實例化一個對象FusionChaets，然后使用該對象的setDataURL方法為圖表指定一個包含圖表數(shù)據(jù)的xml文件作為數(shù)據(jù)源，最后使用該對象的render方法在id屬性為chartdiv的div元素中生成圖表。

????上述對象的構(gòu)造函數(shù)以及兩個方法都是在FusionCharts.js文件中進行實現(xiàn)的，所以在包含上述代碼的頁面中應(yīng)該首先包含對FusionCharts.js文件的引用。

????當(dāng)然，這里的Column2D.xml并不是一個隨隨便便的xml文件，它需要使用特定的標(biāo)簽、屬性等，否則，相應(yīng)的swf文件將不能正常解析并顯示圖表數(shù)據(jù)。

????來看一下Column2D.xml的內(nèi)容：????

<graph?caption='Monthly?Unit?Sales'?xAxisName='Month'?yAxisName='Units'?decimalPrecision='0'?formatNumberScale='0'>
????<set?name='Jan'?value='462'?color='AFD8F8'?/>
????<set?name='Feb'?value='857'?color='F6BD0F'?/>
????<set?name='Mar'?value='671'?color='8BBA00'?/>
????<set?name='Apr'?value='494'?color='FF8E46'/>
????<set?name='May'?value='761'?color='008E8E'/>
????<set?name='Jun'?value='960'?color='D64646'/>
????<set?name='Jul'?value='629'?color='8E468E'/>
????<set?name='Aug'?value='622'?color='588526'/>
????<set?name='Sep'?value='376'?color='B3AA00'/>
????<set?name='Oct'?value='494'?color='008ED6'/>
????<set?name='Nov'?value='761'?color='9D080D'/>
????<set?name='Dec'?value='960'?color='A186BE'/>
</graph>

?

?????相對來說，這樣的xml文件中的內(nèi)容還是比較容易進行理解的，而且，FusionCharts的文檔中提供了關(guān)于各種不同圖表類型可以接受的xml文件標(biāo)簽、屬性等的參考，參見文檔中的“Chart XML Reference”部分。

????通過比較不同類型的圖表的xml數(shù)據(jù)格式，可能會發(fā)現(xiàn)，除了漏斗圖、K線圖、甘特圖等特殊圖表之外，同一類別中常見圖表（如單序列圖表中的2D柱狀圖、3D柱狀圖、2D折線圖、2D餅圖、3D餅圖、2D條形圖、2D面積圖、2D圓環(huán)圖）的xml文件格式是類似的，這樣在特定應(yīng)用中，當(dāng)需要更改圖表類型時，我們只需要將js中的FusionCharts對象重新實例化即可，而不需要更改具體的xml數(shù)據(jù)源。如上述2D柱狀圖更改為2D條形圖時，我們可以使用以下函數(shù)：??

<script?type="text/javascript">
????function?changeChartTypeToBar()
????{
????????chart?=?new?FusionCharts("../Charts/FCF_Bar2D.swf",?"ChartId",?"600",?"350");
????????chart.setDataURL("Data/Column2D.xml");
????????chart.render("chartdiv");
????}
</script>

?

?????此時，整個頁面不必整個刷新，只需要刷新圖表區(qū)即可。而且，很顯然，這是一個比較簡單的操作，需要注意：

• 不同類型的圖表的xml數(shù)據(jù)源可能具有特定的xml標(biāo)簽或?qū)傩?#xff0c;所以在需要更改圖表類型時，盡量使用在不同圖表類型中通用的標(biāo)簽或?qū)傩?
• 還是要強調(diào)，不同類型圖表具有不同的含義，雖然可以方便地在不同圖表類型之間進行轉(zhuǎn)換，但是如果圖表類型選擇錯誤，很可能帶來的是畫蛇添足之嫌。如上面的時序數(shù)據(jù)，如果使用餅圖可能就不那么恰當(dāng)了，雖然將該圖表轉(zhuǎn)換為餅圖是非常簡單的操作

????另外，使用dataURL方式對圖表進行指定的數(shù)據(jù)源，并不要求是一個實際存在的物理xml文件，可以是任何一個返回XML文件或片斷的HTTP請求，只有這樣，我們才能根據(jù)特定的查詢條件或過濾表達(dá)式方便地從數(shù)據(jù)庫中檢索圖表所需數(shù)據(jù)先是在圖表上。很顯然，這種方式下只能通過POST傳遞HTTP請求需要的參數(shù)，此時，需要注意的是由于FusionCharts對于特殊字符的敏感性，在為FusionCharts對象使用setDataURL指定參數(shù)時，該參數(shù)字符串中最好不要包含除了英文字符、數(shù)字、?、&和-之外的字符，當(dāng)然，最好使用Javascript中的escape函數(shù)對其進行編碼。

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/waxdoll/archive/2008/07/07/fusionchartsfree3.html

總結(jié)

以上是生活随笔為你收集整理的FusionCharts Free（3）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。