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

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