丝袜美腿在线视频,黄色毛片网站,深夜视频网

如何利用FusionCharts 來創建3D柱狀圖

原創|其它|編輯：郝浩|2012-06-07 01:08:14.000|閱讀 5215 次

概述：在下載完FusionCharts 以后，我們就可以開始創建我們的第一個flash圖表了。我們將要創建一個簡單的3D柱狀圖形，用它來展示每月銷售情況摘要。

在下載完FusionCharts 以后，我們就可以開始創建我們的第一個flash圖表了。我們將要創建一個簡單的3D柱狀圖形，用它來展示每月銷售情況摘要。

要使用FusionCharts來創建圖形，你需要做下面三件事情：

1.選擇好你要創建的圖形類型對應的SWF文件。例如，我們現在要創建的是3D柱狀圖形，那么我們的SWF文件就是FusionCharts_Column3D.swf。上篇文章已經介紹過了，所有的SWF文件都放在FusionCharts>Charts文件夾里。

2.XML數據文件。FusionCharts只接受基于XML格式的數據。因此，你需要把你的數據轉成XML格式。

3.HTML文件。這個HTML文件將包含用來嵌入圖形的代碼。

在我們進行上面的工作之前，我們先要新建一個文件夾。例如，我們創建一個叫c:\FusionCharts 的文件夾。以后我們的例子都放到這個里面。
對于我們的第一個例子來說，我們將在c:\FusionCharts下再建一個叫MyFirstChart的文件夾。

3.1設置SWF文件

我們還要在c:\FusionCharts下建一個叫FusionCharts的文件夾。現在，我們把所有的SWF文件都拷貝到到這個文件下面（c:\FusionCharts\FusionCharts\）。以后，我們所有例子的代碼，都要引用這個文件夾下面的SWF文件。

3.2創建XML數據文檔

要做報表，當然要有數據了。在這個例子里，我們準備展示一年里每個月的銷售情況。所有數據看起來就像下面的表格中的一樣。

我們知道，FusionCharts只接受XML格式的數據，其他如Excel，CSV，text等都不行。

現在我們按照上表中的數據，做成一個叫Data.xml的XML文件，保存在c:\FusionCharts\MyFirstChart文件夾下。這個文件的容如下：

1. <graph caption='每月銷售額柱形圖' xAxisName='月份' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>

2. <set name='一月' value='462' color='AFD8F8' />

3. <set name='二月' value='857' color='F6BD0F' />

4. <set name='三月' value='671' color='8BBA00' />

5. <set name='四月' value='494' color='FF8E46' />

6. <set name='五月' value='761' color='008E8E' />

7. <set name='六月' value='960' color='D64646' />

8. <set name='七月' value='629' color='8E468E' />

9. <set name='八月' value='622' color='588526' />

10. <set name='九月' value='376' color='B3AA00' />

11. <set name='十月' value='494' color='008ED6' />

12. <set name='十一月' value='761' color='9D080D' />

13. <set name='十二月' value='960' color='A186BE' />

14. </graph>

上面的代碼里，有一個叫<graph>的root元素，它還有一些屬性，用來定義標題，坐標軸，數值格式。我們還看到有很多<set>元素，它用來描述數據。name屬性用來表示月份名稱，value屬性表示銷售額，color屬性表示圖形顏色。

3.3創建包含圖形的HTML文件

每個圖形都要被放到HTML文件里才能顯示，現在，我們把下面的代碼保存c:\FusionCharts\MyFirstChart\Chart.html文件里。

15. <html>

16. <head>

17. <title>My First FusionCharts</title>

18. </head>

19. <body bgcolor="#ffffff">

20. <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=//download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="600" height="500" id="Column3D" >

21. <param name="movie" value="../FusionCharts/FusionCharts_Column3D.swf" />

22. <param name="FlashVars" value="&dataURL=Data.xml&chartWidth=600&chartHeight=500">

23. <param name="quality" value="high" />

24. <embed src="../FusionCharts/FusionCharts_Column3D.swf" flashVars="&dataURL=Data.xml&chartWidth=600&chartHeight=500" quality="high" width="600" height="500" name="Column3D" type="application/x-shockwave-flash" pluginspage="//www.macromedia.com/go/getflashplayer" />

25. </object>

26. </body>

27. </html>

上面的代碼，其實就是一個顯示flash的簡單標記。

movie參數值指定我們的SWF文件，即FusionCharts_Column3D.swf。FlashVars參數值用來指定XML文件的路徑以及圖形的寬和高。

看到這里，如果不熟悉在網頁里調用Flash的朋友，可能會有點迷惑，因為我們發現有一個embed參數，它的各個值都和param參數的值是一樣的，為什么會這樣呢？

其實，這是為了在不同的瀏覽器里都能運行Flash的一個解決辦法。IE瀏覽器是使用param參數來運行Flash的，而Netscape則是使用embed參數來運行Flash。因此，為了保證我們的應用能夠在大多數瀏覽器上運行，我們就需要加上embed參數，并且值和param完全相同。

好了，所有工作都做完了，現在，你可以用IE打開Chart.html，就能看到你的第一個漂亮的Flash圖形了。