由於項目需求需要做一個報表，選擇FusionCharts作為工具使用。由於以前沒有接觸過報表，網上也沒有比較詳細的fusionCharts教程，所以決定好好研究FusionCharts，同時做一個比較簡單的教程提供參考。由於能力有限(應屆畢業生的菜鳥而已)，所以教程(學習筆記而已)不免會有錯誤，望別噴，望指正。當然肯定避免不了會參考其他資料的。
一、FusionCharts簡介和安裝使用
1．1、簡介
FusionCharts是InfoSoft Global公司的一個產品,而FusionCharts Free則是FusionCharts提供的一個免費版本，雖然免費，功能依然強大，圖形類型依然豐富。這里介紹了都是基於FusionCharts Free的。
FusionCharts free 是一個跨平台，跨瀏覽器的flash圖表組件解決方案，能夠被 ASP、.NET, PHP, JSP, ColdFusion, Ruby on Rails, 簡單 HTML 頁面甚至PPT調用。我們不需要知道任何Flash的知識，只需要了解你所用的編程語言而已。
FusionCharts功能強大，那么它到底能夠做什么呢？下面一一展示。
3D/2D 柱形圖
曲線圖
3D/2D餅圖、環圖
區域圖
堆棧圖
聯合圖
上面只是一些功能的展示，FusionCharts還能夠做更多的事情，這里就不一一介紹了。下面介紹如何安裝使用FusionCharts。
1.2 文檔結構
將下載的FusionCharts解壓到任意目錄，得到的解壓文件夾里面會包含類似於此的文檔結構。
Charts ：里面包含着所有的SWF文件，如果你的Web項目需要創建圖像，則導入相應的SWF文件即可。
Code ：里面包含了所有的示例代碼。
Contents ：包含了文檔，也就是API，包含了FusionCharts的使用方法。
Gallery ：包含了一些圖像的創建例子。
JSClass：FusionCharts javascript文件就放在這個目錄下，這些文件能夠幫組我們以一種友好的方式將圖像插入到頁面中。
1.3安裝使用
在了解了FusionCharts的文檔結構后，下面來講解如何將FusionCharts應用到應用程序中。其實FusionCharts的使用方法非常簡單。只需要三個步驟就可以搞定。
1、 導入你要創建圖像相對應的SWF文件。
2、 編寫XML數據文件。
3、 編寫HTML文件，這個文件要包含顯示圖像的相應代碼。
二、我的第一個FusionCharts
介紹了這么久，終於可以創建第一個圖像了。我將以一種比較簡單的方式來創建一個3D柱狀的圖形，用來顯示每個月某件商品的銷售情況。
2.1、創建工程
新建文件夾，命名為FusionCharts，然后在新建兩個文件夾分別命名為FusionCharts、datas。這兩個文件分別用於存放SWF文件和xml數據文件。
2.2、導入文件
將相應的3D柱狀圖像的SWF：Column3D.swf復制到FusionCharts文件夾中。
2.3、創建XML數據文件
創建XML文件：Data1.xml，並將其放入到datas文件夾中。文件內容如下：
<chart yAxisName='銷售個數' caption='2012年年度銷售情況統計分析' useRoundEdges='1' bgColor='FFFFFF,FFFFFF' showBorder='0'>
<set label='一月' value='25000' />
<set label='二月' value='35000' />
<set label='三月' value='42300' />
<set label='四月' value='35300' />
<set label='五月' value='31300' />
<set label='六月' value='25000' />
<set label='七月' value='35000' />
<set label='八月' value='42300' />
<set label='九月' value='35300' />
<set label='10月' value='31300' />
<set label='11月' value='25000' />
<set label='12月' value='35000' />
</chart>
對於這個XML文件這里簡單介紹一下。
<chart>元素作為root元素，他有一些基本屬性，如：設置x、y軸名稱，報表標題、數值格式。在<chart>元素中有很多的<set>元素，這個元素用來描述設定的數據，label表示名稱、value表示值。
2.4、編寫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/Column3D.swf" /> <param name="FlashVars" value="&dataURL=../datas/Data.xml&chartWidth=600&chartHeight=500"> <param name="quality" value="high" /> <embed src="../FusionCharts/Column3D.swf" flashVars="&dataURL=../datas/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>
生成的圖像：
下篇將介紹如何使用js來加載FusionCharts和使用dataXML加載數據。