FusionChart使用教程：數(shù)據(jù)庫(kù)的動(dòng)態(tài)數(shù)據(jù)交互

---

簡(jiǎn)單介紹一下FusionCharts，這是一款動(dòng)態(tài)的制作報(bào)表的工具，主要通過(guò)XML數(shù)據(jù)和SWF文件進(jìn)行交互，實(shí)現(xiàn)類(lèi)似于flash的非常漂亮的報(bào)表。下面就做一個(gè)Demo，簡(jiǎn)要介紹一下啊FusionCharts的功能，以及如何實(shí)現(xiàn)一個(gè)完整動(dòng)態(tài)數(shù)據(jù)的交互。 

下載FusionCharts的官方API發(fā)布包，我做這個(gè)例子的時(shí)候是V3.1下載后，在MyEclipse下新建一個(gè)Web工程。然后將發(fā)布包中的Charts文件夾拷貝到WebRoot下，這里面都是我們接下來(lái)要做圖的時(shí)候用到的一些swf文件。接著還需要一個(gè)JS文件，是JSClass文件夾下的FusionCharts.js文件，將它拷貝到WebRoot下的ChartsJs文件夾下。由于我這個(gè)項(xiàng)目是結(jié)合struts1還有spring加上JPA做的。所以大家先有個(gè)基本的認(rèn)識(shí)。然后在WEB-INF下建立兩個(gè)目錄，一個(gè)叫fusion、一個(gè)叫common，等會(huì)我們會(huì)用到。找到發(fā)布包的\Code\JSP\Includes目錄下，將FusionCharts.jsp文件拷貝到common文件夾下。 

首先主要是展示2004、2005、2006、2007四年的一個(gè)油品的銷(xiāo)售統(tǒng)計(jì)，用柱狀圖來(lái)表示，然后點(diǎn)擊每一個(gè)柱子，會(huì)在右邊顯示出餅狀的上半年的各個(gè)月份的銷(xiāo)售比例。 

首先建立實(shí)體Bean，代碼如下：

Java代碼

Java代碼

這分別是年銷(xiāo)售統(tǒng)計(jì)和月銷(xiāo)售統(tǒng)計(jì)的實(shí)體Bean 

由于Service層的東西都在底層封裝好了，所以建立好表后，手動(dòng)添加一些數(shù)據(jù)就好了。 

接下來(lái)是Action層的代碼，首先是針對(duì)年銷(xiāo)售突擊的Action的代碼

Java代碼：

這里的鉆取要用到ajax技術(shù)，所以接下來(lái)是月銷(xiāo)售統(tǒng)計(jì)的數(shù)據(jù)鉆取 

最后是頁(yè)面的代碼，struts1的配置我就不寫(xiě)了，反正是定向到WEB-INF下的fusion下的 
year_units_report.jsp下，頁(yè)面代碼如下 ：

Java代碼：

最后圖的效果如下 

這樣就做到了動(dòng)態(tài)數(shù)據(jù)交互鉆取，頁(yè)面不刷新。達(dá)到了預(yù)期的效果。