原創|使用教程|編輯:龔雪|2014-06-10 10:15:40.000|閱讀 2267 次
概述:本文簡要介紹一下FusionCharts的功能,以及如何實現一個完整動態數據的交互。?
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
簡單介紹一下FusionCharts,這是一款動態的制作報表的工具,主要通過XML數據和SWF文件進行交互,實現類似于flash的非常漂亮的報表。下面就做一個Demo,簡要介紹一下啊FusionCharts的功能,以及如何實現一個完整動態數據的交互。
下載FusionCharts的官方API發布包,我做這個例子的時候是V3.1下載后,在MyEclipse下新建一個Web工程。然后將發布包中的Charts文件夾拷貝到WebRoot下,這里面都是我們接下來要做圖的時候用到的一些swf文件。接著還需要一個JS文件,是JSClass文件夾下的FusionCharts.js文件,將它拷貝到WebRoot下的ChartsJs文件夾下。由于我這個項目是結合struts1還有spring加上JPA做的。所以大家先有個基本的認識。然后在WEB-INF下建立兩個目錄,一個叫fusion、一個叫common,等會我們會用到。找到發布包的\Code\JSP\Includes目錄下,將FusionCharts.jsp文件拷貝到common文件夾下。
首先主要是展示2004、2005、2006、2007四年的一個油品的銷售統計,用柱狀圖來表示,然后點擊每一個柱子,會在右邊顯示出餅狀的上半年的各個月份的銷售比例。
首先建立實體Bean,代碼如下:
Java代碼
Java代碼
這分別是年銷售統計和月銷售統計的實體Bean
由于Service層的東西都在底層封裝好了,所以建立好表后,手動添加一些數據就好了。
接下來是Action層的代碼,首先是針對年銷售突擊的Action的代碼
Java代碼:
這里的鉆取要用到ajax技術,所以接下來是月銷售統計的數據鉆取
最后是頁面的代碼,struts1的配置我就不寫了,反正是定向到WEB-INF下的fusion下的
year_units_report.jsp下,頁面代碼如下 :
Java代碼:
最后圖的效果如下
這樣就做到了動態數據交互鉆取,頁面不刷新。達到了預期的效果。
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:慧都控件網