在介紹完了FCF的下載安裝以后，現在，我們終于要開始創建我們的第一個圖表了。我們將要創建一個簡單的3D柱狀圖形，用它來展示每月銷售情況摘要。
要使用FCF來創建圖形，你需要做下面三件事情：
1.選擇好你要創建的圖形類型對應的SWF文件。例如，我們現在要創建的是3D柱狀圖形，那么我們的SWF文件就是FCF_Column3D.swf。上篇文章已經介紹過了，所有的SWF文件都放在FusionChartsFree>Charts文件夾里。
2.XML數據文件。FCF只接受基于XML格式的數據。因此，你需要把你的數據轉成XML格式。
3.HTML文件。這個HTML文件將包含用來嵌入圖形的代碼。
在我們進行上面的工作之前，我們先要新建一個文件夾。例如，我們創建一個叫c:\FusionCharts 的文件夾。以后我們的例子都放到這個里面。
對于我們的第一個例子來說，我們將在c:\FusionCharts下再建一個叫MyFirstChart的文件夾。
設置SWF文件
我們還要在c:\FusionCharts下建一個叫FusionCharts的文件夾。現在，我們把所有的SWF文件都拷貝到到這個文件下面（c:\FusionCharts\FusionCharts\）。以后，我們所有例子的代碼，都要引用這個文件夾下面的SWF文件。
好了，SWF文件就設置好了。
創建XML數據文檔
要做報表，當然要有數據了。在這個例子里，我們準備展示一年里每個月的銷售情況。所有數據看起來就像下面的表格中的一樣。
我們知道，FCF只接受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屬性表示圖形顏色。
創建包含圖形的HTML文件
每個圖形都要被放到HTML文件里才能顯示，現在，我們把下面的代碼保存c:\FusionCharts\MyFirstChart\Chart.html文件里。
<html>
<head>
<title>My First FusionCharts</title>
</head>
<body bgcolor="#ffffff">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="600" height="500" id="Column3D" >
<param name="movie" value="../FusionCharts/FCF_Column3D.swf" />
<param name="FlashVars" value="&dataURL=Data.xml&chartWidth=600&chartHeight=500">
<param name="quality" value="high" />
<embed src="../FusionCharts/FCF_Column3D.swf" flashVars="&dataURL=Data.xml&chartWidth=600&chartHeight=500" quality="high" width="600" height="500" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>
上面的代碼，其實就是一個顯示flash的簡單標記。
movie參數值指定我們的SWF文件，即FCF_Column3D.swf。FlashVars參數值用來指定XML文件的路徑以及圖形的寬和高。
看到這里，如果不熟悉在網頁里調用Flash的朋友，可能會有點迷惑，因為我們發現有一個embed參數，它的各個值都和param參數的值是一樣的，為什么會這樣呢？
其實，這是為了在不同的瀏覽器里都能運行Flash的一個解決辦法。IE瀏覽器是使用param參數來運行Flash的，而Netscape則是使用embed參數來運行Flash。因此，為了保證我們的應用能夠在大多數瀏覽器上運行，我們就需要加上embed參數，并且值和param完全相同。
好了，所有工作都做完了，現在，你可以用IE打開Chart.html，就能看到你的第一個漂亮的Flash圖形了。
圖片1
問題
如果你很不幸，沒有在頁面上看到圖形，那么可能是下面的原因之一：
1.SWF 沒有放到正確的文件夾。
2.在Chart.html里，SWF的路徑設置不正確。
3.沒有安裝Flash Player。
4.沒有啟用瀏覽器Flash播放選項。
如果你得到了一個“Error in Loading Data”的消息，可能是：
1.Data.xml文件沒放到正確的文件夾。
2.Data.xml的文件名不正確。比如，你可能不小心把它命名為Data.xml.txt。
如果你得到了一個“Invalid XML Data”的消息，可能是;
1.Data.xml里的內容有錯誤。
到這里，第一個圖表就做完了，感覺怎么樣？你是覺得簡單呢，容易呢，還是小Case呢？
不過，這里我有個小問題，就是Data.xml里，yAxisName屬性如果是中文的話，顯示不出來。希望隨著教程的繼續，我進一步了解FCF以后，可以解決這個小問題，也許它就是BUG。
圖形轉換
上面的圖形是一個柱形圖，如果我們想用同樣的數據，以餅圖來展示，我們只需要將Chart.html代碼中的“FCF_Column3D.swf”改成餅圖的SWF文件就可以了，即“FCF_Pie3D.swf”?，F在我們再刷新瀏覽器，看看效果：
圖片1
夠酷吧。
在接下來的系列文章里，我將介紹使用JavaScript來加載Flash。
本文原始地址：http://ajava.org/hot/fusioncharts/870.html