如何利用Flash圖表組件FusionCharts來創(chuàng)建3D柱狀圖.docx

慧都控件網(wǎng)如何利用Flash圖表組件-FusionCharts 創(chuàng)建3D柱狀圖在下載完FusionCharts 以后，我們就可以開始創(chuàng)建我們的第一個(gè)flash圖表了。我們將要?jiǎng)?chuàng)建一個(gè)簡單的3D柱狀圖形，用它來展示每月銷售情況摘要。要使用FusionCharts來創(chuàng)建圖形，你需要做下面三件事情：1.選擇好你要?jiǎng)?chuàng)建的圖形類型對(duì)應(yīng)的SWF文件。例如，我們現(xiàn)在要?jiǎng)?chuàng)建的是3D柱狀圖形，那 么我們的SWF文件就是FusionCharts_Column3D.swf。上篇文章已經(jīng)介紹過了，所有的SWF文件都放在 FusionChartsCharts文件夾里。2.XML數(shù)據(jù)文件。FusionCharts只接受基于XML格式的數(shù)據(jù)。因此，你需要把你的數(shù)據(jù)轉(zhuǎn)成XML格式。3.HTML文件。這個(gè)HTML文件將包含用來嵌入圖形的代碼。在我們進(jìn)行上面的工作之前，我們先要新建一個(gè)文件夾。例如，我們創(chuàng)建一個(gè)叫c:FusionCharts 的文件夾。以后我們的例子都放到這個(gè)里面。對(duì)于我們的第一個(gè)例子來說，我們將在c:FusionCharts下再建一個(gè)叫MyFirstChart的文件夾。3.1設(shè)置SWF文件我們還要在c:FusionCharts下建一個(gè)叫FusionCharts的文件夾?，F(xiàn) 在，我們把所有的SWF文件都拷貝到到這個(gè)文件下面（c:FusionChartsFusionCharts）。以后，我們所有例子的代碼，都要引 用這個(gè)文件夾下面的SWF文件。3.2創(chuàng)建XML數(shù)據(jù)文檔要做報(bào)表，當(dāng)然要有數(shù)據(jù)了。在這個(gè)例子里，我們準(zhǔn)備展示一年里每個(gè)月的銷售情況。所有數(shù)據(jù)看起來就像下面的表格中的一樣。我們知道，F(xiàn)usionCharts只接受XML格式的數(shù)據(jù)，其他如Excel，CSV，text等都不行?，F(xiàn)在我們按照上表中的數(shù)據(jù)，做成一個(gè)叫Data.xml的XML文件，保存在c:FusionChartsMyFirstChart文件夾下。這個(gè)文件的容如下：1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 上面的代碼里，有一個(gè)叫的root元素，它還有一些屬性，用來定義標(biāo)題，坐標(biāo)軸，數(shù)值格式。我們還看到有很多元素，它用來描述數(shù)據(jù)。name屬性用來表示月份名稱，value屬性表示銷售額，color屬性表示圖形顏色。3.3創(chuàng)建包含圖形的HTML文件每個(gè)圖形都要被放到HTML文件里才能顯示，現(xiàn)在，我們把下面的代碼保存c:FusionChartsMyFirstChartChart.html文件里。15. 16. 17. My First FusionCharts18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 上面的代碼，其實(shí)就是一個(gè)顯示flash的簡單標(biāo)記。movie參數(shù)值指定我們的SWF文件，即FusionCharts_Column3D.swf。FlashVars參數(shù)值用來指定XML文件的路徑以及圖形的寬和高?？吹竭@里，如果不熟悉在網(wǎng)頁里調(diào)用Flash的朋友，可能會(huì)有點(diǎn)迷惑，因?yàn)槲覀儼l(fā)現(xiàn)有一個(gè)embed參數(shù)，它的各個(gè)值都和param參數(shù)的值是一樣的，為什么會(huì)這樣呢？其實(shí)，這是為了在不同的瀏覽器里都能運(yùn)行Flash的一個(gè)解決辦法。IE瀏覽器是使用 param參數(shù)來運(yùn)行Flash的，而Netscape則是使用embed參數(shù)來運(yùn)行Flash。因此，為了保證我們的應(yīng)用能夠在大多數(shù)瀏覽器上運(yùn)行，我 們就需要加上embed參數(shù)，并且值和param完全相同。好了，所有工作都做完了，現(xiàn)在，你可以用IE打開Chart.html，就能看到你的第一個(gè)漂亮的Flash圖形了。3.4問題如果你很不幸，沒有在頁面上看到圖形，那么可能是下面的原因之一： SWF 沒有放到正確的文件夾。 在Chart.html里，SWF的路徑設(shè)置不正確。 沒有安裝Flash Player。 沒有啟用瀏覽器Flash播放選項(xiàng)。如果你得到了一個(gè)“Error in Loading Data”的消息，可能是： Data.xml文件沒放到正確的文件夾。 Data.xml的文件名不正確。比如，你可能不小心把它命名為Data.xml.txt。如果你得到了一個(gè)“Invalid XML Data”的消息，可能是;1.Data.xml里的內(nèi)容有錯(cuò)誤。到這里，第一個(gè)圖表就做完了，感覺怎么樣？你是覺得簡單呢，容易呢，還是小Case呢？不過，這里我有個(gè)小問題，就是Data.xml里，yAxisName屬性如果是中文的話，顯示不出來。希望隨著教程的繼續(xù)，我進(jìn)一步了解FusionCharts以后，可以解決這個(gè)小問題，也許它就是BUG。3.5圖形轉(zhuǎn)換上面的圖形是一個(gè)柱形圖，如果我們想用同樣的數(shù)據(jù)，以餅圖來展示，我們只需要將 C