amCharts是一款前臺(tái)Flash報(bào)表工具,官方網(wǎng)站http://www.amcharts.com/
由于使用了Flash ,可以做出不少華麗的動(dòng)畫效果,使報(bào)表數(shù)據(jù)顯得生動(dòng)立體。與其說它是報(bào)表工具,倒不如稱之為圖表工具。


amCharts可生成餅圖柱狀圖線圖等,細(xì)分下來種類很多,官方有很多例子供參考。
下面介紹一下如何使用amCharts。
制作一個(gè)報(bào)表非常簡(jiǎn)單,基本包括3個(gè)文件:
1.原始報(bào)表flash程序(通過動(dòng)態(tài)讀取xml數(shù)據(jù)元素進(jìn)行顯示)
2.flash配置文件(xml)
3.flash數(shù)據(jù)文件(可以是xml或csv)
flash程序配置文件一般會(huì)提前做好,當(dāng)然也可以動(dòng)態(tài)生成。而數(shù)據(jù)文件則是我們主要需要處理的。
首先設(shè)計(jì)一下圖表的樣式,編輯flash配置文件。可以從官方例子里借鑒。
配置文件中幾個(gè)比較重要的標(biāo)簽:
pie
圖表的基本配置,不同種類的圖有不同的標(biāo)簽名稱。
animation
圖表初始化時(shí)可為其設(shè)置動(dòng)畫,每種圖都可有不一樣的我特效。
background
圖表背景,可以是一張圖甚至另一個(gè)flash
balloon
設(shè)置鼠標(biāo)經(jīng)過圖表項(xiàng)目時(shí)所顯示的過濾數(shù)據(jù)
legend
如有需要,可以為圖表單獨(dú)設(shè)立一個(gè)說明框
export_as_image
顧名思義,配置圖片導(dǎo)出的設(shè)置選項(xiàng)
labels
圖表標(biāo)題
plugins
圖表還設(shè)置了接口,可以引入渲染插件
顯示樣式設(shè)計(jì)好了,造個(gè)假的數(shù)據(jù)文件看看效果,如果滿意的話就可以寫產(chǎn)生數(shù)據(jù)文件的代碼了。
數(shù)據(jù)文件一般需要?jiǎng)討B(tài)生成,但不會(huì)每次點(diǎn)擊都會(huì)生成新的數(shù)據(jù)文件吧?所以通常會(huì)按時(shí)間間隔生成數(shù)據(jù)文件(每小時(shí)、每天)。
具體生成方法就不提了。以上面2圖為例,帖一下生成的數(shù)據(jù)文件的大致格式:
餅圖
柱狀圖(設(shè)計(jì)了2組數(shù)據(jù))
amCharts提供了生成圖片的功能

amCharts對(duì)后臺(tái)透明,無論使用何種語言(java/php),只要提供URL,amCharts就會(huì)把畫面上的像素一個(gè)個(gè)作為paramter傳到后臺(tái),這樣就可以生成圖片了。
誠(chéng)然,amCharts也存在一些弊端。
首次顯示一個(gè)報(bào)表,總計(jì)需要大約100k的流量(flash程序+配置文件能占到總文件大小的90%)。
這在網(wǎng)絡(luò)條件不佳的情況下可能會(huì)大大降低用戶體驗(yàn)度。解決辦法是壓縮一下配置XML文件,這樣會(huì)適當(dāng)降低一些流量開銷。
另外,圖片導(dǎo)出也可能會(huì)發(fā)生問題。如附錄的圖片導(dǎo)出代碼可以看出,導(dǎo)出圖片的開銷是可觀的,parameter很多(像素n方),很占用資源。
如上圖那般方式導(dǎo)出,amCharts的flash本身沒有提供控制功能,用戶可以連續(xù)無限點(diǎn),造成重復(fù)提交。
解決辦法是關(guān)掉flash本身的圖片導(dǎo)出功能,自己做按鈕讓用戶點(diǎn)來調(diào)用導(dǎo)出函數(shù),然后在按鈕上做文章。缺點(diǎn)是頁面無故多了個(gè)按鈕會(huì)變丑...
而且這也不會(huì)從根本上解決問題,parameter是固定傳的,即使在后臺(tái)做了圖片緩存,效果也不會(huì)太明顯。
amCharts是一款華麗的報(bào)表工具,依稀記得自己第一次鼓搗的時(shí)候旁邊的同事紛紛圍上來贊嘆。
用好了它,會(huì)讓你的網(wǎng)頁顯得非常牛b。當(dāng)然這并不是我們的初衷,讓死板的報(bào)表變得好看易于理解,才是我們最想要的。
附錄:
圖片導(dǎo)出的代碼可參考這里:
http://www.javaeye.com/topic/229006
由于使用了Flash ,可以做出不少華麗的動(dòng)畫效果,使報(bào)表數(shù)據(jù)顯得生動(dòng)立體。與其說它是報(bào)表工具,倒不如稱之為圖表工具。


amCharts可生成餅圖柱狀圖線圖等,細(xì)分下來種類很多,官方有很多例子供參考。
下面介紹一下如何使用amCharts。
制作一個(gè)報(bào)表非常簡(jiǎn)單,基本包括3個(gè)文件:
1.原始報(bào)表flash程序(通過動(dòng)態(tài)讀取xml數(shù)據(jù)元素進(jìn)行顯示)
2.flash配置文件(xml)
3.flash數(shù)據(jù)文件(可以是xml或csv)
flash程序配置文件一般會(huì)提前做好,當(dāng)然也可以動(dòng)態(tài)生成。而數(shù)據(jù)文件則是我們主要需要處理的。
首先設(shè)計(jì)一下圖表的樣式,編輯flash配置文件。可以從官方例子里借鑒。
配置文件中幾個(gè)比較重要的標(biāo)簽:
pie
圖表的基本配置,不同種類的圖有不同的標(biāo)簽名稱。
animation
圖表初始化時(shí)可為其設(shè)置動(dòng)畫,每種圖都可有不一樣的我特效。
background
圖表背景,可以是一張圖甚至另一個(gè)flash
balloon
設(shè)置鼠標(biāo)經(jīng)過圖表項(xiàng)目時(shí)所顯示的過濾數(shù)據(jù)
legend
如有需要,可以為圖表單獨(dú)設(shè)立一個(gè)說明框
export_as_image
顧名思義,配置圖片導(dǎo)出的設(shè)置選項(xiàng)
labels
圖表標(biāo)題
plugins
圖表還設(shè)置了接口,可以引入渲染插件
顯示樣式設(shè)計(jì)好了,造個(gè)假的數(shù)據(jù)文件看看效果,如果滿意的話就可以寫產(chǎn)生數(shù)據(jù)文件的代碼了。
數(shù)據(jù)文件一般需要?jiǎng)討B(tài)生成,但不會(huì)每次點(diǎn)擊都會(huì)生成新的數(shù)據(jù)文件吧?所以通常會(huì)按時(shí)間間隔生成數(shù)據(jù)文件(每小時(shí)、每天)。
具體生成方法就不提了。以上面2圖為例,帖一下生成的數(shù)據(jù)文件的大致格式:
餅圖
<?xml version="1.0" encoding="UTF-8"?>
<pie>
<slice title="圖書管理系統(tǒng)" description="使用VB為學(xué)校圖書館開發(fā)的圖書管理系統(tǒng)" >2.000</slice>
<slice title="學(xué)生管理系統(tǒng)" description="使用C#為學(xué)校開發(fā)的學(xué)生管理系統(tǒng)" >1.000</slice>
<slice title="人事管理系統(tǒng)" description="使用Java為企事業(yè)單位開發(fā)的人事管理系統(tǒng)" >1.000</slice>
</pie>
<pie>
<slice title="圖書管理系統(tǒng)" description="使用VB為學(xué)校圖書館開發(fā)的圖書管理系統(tǒng)" >2.000</slice>
<slice title="學(xué)生管理系統(tǒng)" description="使用C#為學(xué)校開發(fā)的學(xué)生管理系統(tǒng)" >1.000</slice>
<slice title="人事管理系統(tǒng)" description="使用Java為企事業(yè)單位開發(fā)的人事管理系統(tǒng)" >1.000</slice>
</pie>
柱狀圖(設(shè)計(jì)了2組數(shù)據(jù))
<?xml version="1.0" encoding="UTF-8"?>
<chart>
<series>
<value xid="0" >08年3月</value>
<value xid="1" >08年4月</value>
<value xid="2" >08年5月</value>

</series>
<graphs>
<graph gid='1'>
<value xid="0" >6</value>
<value xid="1" >3</value>
<value xid="2" >7</value>

</graph>
<graph gid='0'>
<value xid="0" >8</value>
<value xid="1" >7</value>
<value xid="2" >15</value>

</graph>
</graphs>
</chart>
<chart>
<series>
<value xid="0" >08年3月</value>
<value xid="1" >08年4月</value>
<value xid="2" >08年5月</value>

</series>
<graphs>
<graph gid='1'>
<value xid="0" >6</value>
<value xid="1" >3</value>
<value xid="2" >7</value>

</graph>
<graph gid='0'>
<value xid="0" >8</value>
<value xid="1" >7</value>
<value xid="2" >15</value>

</graph>
</graphs>
</chart>
amCharts提供了生成圖片的功能

amCharts對(duì)后臺(tái)透明,無論使用何種語言(java/php),只要提供URL,amCharts就會(huì)把畫面上的像素一個(gè)個(gè)作為paramter傳到后臺(tái),這樣就可以生成圖片了。
誠(chéng)然,amCharts也存在一些弊端。
首次顯示一個(gè)報(bào)表,總計(jì)需要大約100k的流量(flash程序+配置文件能占到總文件大小的90%)。
這在網(wǎng)絡(luò)條件不佳的情況下可能會(huì)大大降低用戶體驗(yàn)度。解決辦法是壓縮一下配置XML文件,這樣會(huì)適當(dāng)降低一些流量開銷。
另外,圖片導(dǎo)出也可能會(huì)發(fā)生問題。如附錄的圖片導(dǎo)出代碼可以看出,導(dǎo)出圖片的開銷是可觀的,parameter很多(像素n方),很占用資源。
如上圖那般方式導(dǎo)出,amCharts的flash本身沒有提供控制功能,用戶可以連續(xù)無限點(diǎn),造成重復(fù)提交。
解決辦法是關(guān)掉flash本身的圖片導(dǎo)出功能,自己做按鈕讓用戶點(diǎn)來調(diào)用導(dǎo)出函數(shù),然后在按鈕上做文章。缺點(diǎn)是頁面無故多了個(gè)按鈕會(huì)變丑...
而且這也不會(huì)從根本上解決問題,parameter是固定傳的,即使在后臺(tái)做了圖片緩存,效果也不會(huì)太明顯。
amCharts是一款華麗的報(bào)表工具,依稀記得自己第一次鼓搗的時(shí)候旁邊的同事紛紛圍上來贊嘆。
用好了它,會(huì)讓你的網(wǎng)頁顯得非常牛b。當(dāng)然這并不是我們的初衷,讓死板的報(bào)表變得好看易于理解,才是我們最想要的。
附錄:
圖片導(dǎo)出的代碼可參考這里:
http://www.javaeye.com/topic/229006