?

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

<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方法為圖表指定一個包含圖表數據的xml文件作為數據源，最后使用該對象的render方法在id屬性為chartdiv的div元素中生成圖表。

????上述對象的構造函數以及兩個方法都是在FusionCharts.js文件中進行實現的，所以在包含上述代碼的頁面中應該首先包含對FusionCharts.js文件的引用。

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

????來看一下Column2D.xml的內容：????

<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文件中的內容還是比較容易進行理解的，而且，FusionCharts的文檔中提供了關于各種不同圖表類型可以接受的xml文件標簽、屬性等的參考，參見文檔中的“Chart XML Reference”部分。

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

<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>

?

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

• 不同類型的圖表的xml數據源可能具有特定的xml標簽或屬性，所以在需要更改圖表類型時，盡量使用在不同圖表類型中通用的標簽或屬性
• 還是要強調，不同類型圖表具有不同的含義，雖然可以方便地在不同圖表類型之間進行轉換，但是如果圖表類型選擇錯誤，很可能帶來的是畫蛇添足之嫌。如上面的時序數據，如果使用餅圖可能就不那么恰當了，雖然將該圖表轉換為餅圖是非常簡單的操作

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

?

?

?

轉載于:https://www.cnblogs.com/waxdoll/archive/2008/07/07/fusionchartsfree3.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。