級(jí)別: 初級(jí)
劉冬 (winter.lau@163.com), 軟件工程師, 珠海市創(chuàng)我科技發(fā)展有限公司
2003 年 9 月 08 日
WWW 的發(fā)展使得基于因特網(wǎng)的應(yīng)用程序不再局限于靜態(tài)或者簡(jiǎn)單的動(dòng)態(tài)內(nèi)容提供。傳統(tǒng)的一些以軟件包形式發(fā)布應(yīng)用程序例如報(bào)表系統(tǒng)等都在逐漸搬到因特網(wǎng)上。但是這 兩者之間有著天壤之別,雖然對(duì)于數(shù)據(jù)獲取、業(yè)務(wù)處理等方面基本類(lèi)似,但是最大的差別在于用戶(hù)界面。為了能在web瀏覽器上顯示要求用戶(hù)界面使用HTML以 及圖片的方式來(lái)展現(xiàn)數(shù)據(jù),而傳統(tǒng)的一些利用操作系統(tǒng)本身的控件來(lái)開(kāi)發(fā)的用戶(hù)界面無(wú)法適應(yīng)琳瑯滿(mǎn)目的客戶(hù)端,因此在這里也變得無(wú)能為力?;氐奖疚牡念}目上 來(lái),為了創(chuàng)建一個(gè)可以在web瀏覽器上查看到圖表一般有兩種做法:第一種就是使用applet利用java本身對(duì)圖形的支持來(lái)顯示一個(gè)圖表;第二種就是直 接在web服務(wù)器端生成好圖表圖片文件后發(fā)送給瀏覽器。第一種方式顯然對(duì)于客戶(hù)端要求太高,隨著現(xiàn)在主流瀏覽器放棄對(duì)JAVA的支持后,這種方式只適合一 些局域網(wǎng)的應(yīng)用,而對(duì)于因特網(wǎng)的環(huán)境就顯得不太適合。因此我們下面將介紹一個(gè)JAVA的圖表引擎JFreeChart用來(lái)產(chǎn)生基于WEB的圖表。
JFreeChart是開(kāi)放源代碼站點(diǎn)SourceForge.net上的一個(gè)JAVA項(xiàng)目,它主要用來(lái)各種各樣的圖表,這些圖表包括:餅圖、柱狀圖(普 通柱狀圖以及堆棧柱狀圖)、線(xiàn)圖、區(qū)域圖、分布圖、混合圖、甘特圖以及一些儀表盤(pán)等等。這些不同式樣的圖表基本上可以滿(mǎn)足目前的要求。為了減少篇幅本文主 要介紹前面三種類(lèi)型的圖表,讀者可以觸類(lèi)旁通去開(kāi)發(fā)其他樣式的圖表。下面幾個(gè)是JFreeChart產(chǎn)生的這三種類(lèi)型圖表的結(jié)果:
圖1

圖2

圖3

上 面的三個(gè)圖都是表示四個(gè)季度的某個(gè)產(chǎn)品的銷(xiāo)量信息。在繼續(xù)下面小節(jié)之前必須先準(zhǔn)備好開(kāi)發(fā)環(huán)境,因?yàn)槭腔赪EB瀏覽器的圖表展現(xiàn),因此需要一個(gè) Servlet引擎或者是J2EE應(yīng)用服務(wù)器(例如WebSphere,Tomcat等)。WEB環(huán)境的搭建就不累贅了,讀者根據(jù)喜好自行安裝。 JFreeChart引擎本身需要到SourceForge.net上下載,地址如下:
JFreeChart主頁(yè): |
下載的時(shí)候需要注意的是必須下載兩個(gè)文件:JFreeChart以及Jcommon。目前最新配套版本是:JFreeChart 0.9.11 Jcommon 0.8.6
這里有點(diǎn)筆者在開(kāi)發(fā)中遇見(jiàn)的問(wèn)題需要注意的是:在使用Eclipse開(kāi)發(fā)的時(shí)候會(huì)報(bào)一個(gè)莫名其妙的錯(cuò)誤,錯(cuò)誤可能指向某個(gè)類(lèi)文件的第一行。遇到這樣的問(wèn)題一般是因?yàn)闆](méi)有把Jcommon的jar包設(shè)置到項(xiàng)目的類(lèi)路徑中的緣故。具體的原因不祥。
![]() ![]() |
![]()
|
在 開(kāi)始使用JFreeChart之前我們有必要先大概了解一下JFreeChart本身的結(jié)構(gòu)以及它所帶一些例子程序,這樣有助于我們下一步自行開(kāi)發(fā)。下載 JFreeChart包后已經(jīng)帶有非常豐富的例子,因?yàn)镴FreeChart這個(gè)項(xiàng)目本身的使用文檔非常少,因此學(xué)習(xí)它最好的辦法就是學(xué)習(xí)它所帶的例子源 碼。在包org.jfree.chart.demo中有幾十個(gè)文件用于展示JFreeChart所能支持的所有圖表的結(jié)果。如果你的JDK是比較新的情況 下可能在運(yùn)行這些例子時(shí)會(huì)有問(wèn)題,現(xiàn)象如下:
java.lang.UnsatisfiedLinkError: initDDraw |
這個(gè)錯(cuò)誤是由于新版的Swing大量的使用了微軟的 DirectDraw的技術(shù)來(lái)提高畫(huà)圖的性能,而可能你的顯卡在這時(shí)候會(huì)跟你鬧點(diǎn)情緒或者顯卡本身并不支持這樣的一個(gè)技術(shù)。難道就沒(méi)有辦法了嘛?要解決這 個(gè)問(wèn)題也非常簡(jiǎn)單,我們可以屏蔽掉DirectDraw,不讓Swing使用該技術(shù)就可以了。在運(yùn)行這些代碼時(shí)給虛擬機(jī)指定參數(shù)- Dsun.java2d.noddraw即可。
這時(shí)可能你又該納悶了,不說(shuō)是基于Web的圖表嘛,怎么又扯到Swing上了?這是因?yàn)闉榱耸归_(kāi)發(fā)者容易上手,無(wú)需配置 任何運(yùn)行環(huán)境,所以這些例子都是基于GUI方式的用于展現(xiàn)給開(kāi)發(fā)者如果生成一個(gè)圖表,我們要學(xué)習(xí)的也就是如何利用這個(gè)引擎生成圖表而不是怎么來(lái)顯示一個(gè)圖 表。當(dāng)我們把生成的圖表對(duì)象Export到一個(gè)圖像文件即可在Web上發(fā)布。
下面我們來(lái)介紹JFreeChart中幾個(gè)核心的對(duì)象類(lèi):
類(lèi)名 | 類(lèi)的作用以及簡(jiǎn)單描述 |
JFreeChart | 圖表對(duì)象,任何類(lèi)型的圖表的最終表現(xiàn)形式都是在該對(duì)象進(jìn)行一些屬性的定制。JFreeChart引擎本身提供了一個(gè)工廠類(lèi)用于創(chuàng)建不同類(lèi)型的圖表對(duì)象 |
XXXXXDataset | 數(shù)據(jù)集對(duì)象,用于提供顯示圖表所用的數(shù)據(jù)。根據(jù)不同類(lèi)型的圖表對(duì)應(yīng)著很多類(lèi)型的數(shù)據(jù)集對(duì)象類(lèi) |
XXXXXPlot | 圖表區(qū)域?qū)ο?,基本上這個(gè)對(duì)象決定著什么樣式的圖表,創(chuàng)建該對(duì)象的時(shí)候需要Axis、Renderer以及數(shù)據(jù)集對(duì)象的支持 |
XXXXXAxis | 用于處理圖表的兩個(gè)軸:縱軸和橫軸 |
XXXXXRenderer | 負(fù)責(zé)如何顯示一個(gè)圖表對(duì)象 |
XXXXXURLGenerator | 用于生成Web圖表中每個(gè)項(xiàng)目的鼠標(biāo)點(diǎn)擊鏈接 |
XXXXXToolTipGenerator | 用于生成圖象的幫助提示,不同類(lèi)型圖表對(duì)應(yīng)不同類(lèi)型的工具提示類(lèi) |
基 本上我認(rèn)為JFreeChart項(xiàng)目本身的類(lèi)結(jié)構(gòu)的設(shè)計(jì)并不是很好,首先在創(chuàng)建圖表的時(shí)候用到了大量的工廠方法,這樣做雖然可以簡(jiǎn)化創(chuàng)建圖表對(duì)象的代碼, 但是對(duì)項(xiàng)目本身或者開(kāi)發(fā)人員來(lái)講自行擴(kuò)展一種新的圖表都仍然是一件很麻煩的事情;其次除圖表對(duì)象本身外其余的類(lèi)過(guò)于復(fù)雜,使用者必須去了解每個(gè)類(lèi)型的圖表 對(duì)象應(yīng)該對(duì)應(yīng)哪些Axis、Plot、Renderer類(lèi),并且必須非常熟悉這些類(lèi)的構(gòu)造函數(shù)中每個(gè)參數(shù)的具體含義。這些問(wèn)題都大大困擾很多初學(xué)者。不 過(guò),雖然存在很多問(wèn)題,但是JFreeChart本身仍不失為一個(gè)非常優(yōu)秀的圖表引擎,況且項(xiàng)目本身也在逐漸的發(fā)展中。
在非常簡(jiǎn)略的介紹了JFreeChart本身的代碼結(jié)構(gòu)后,下面我們開(kāi)始動(dòng)手試驗(yàn)幾個(gè)常用的圖表并把他們放到web上。
![]() ![]() |
![]()
|
限于篇幅的問(wèn)題我們?cè)谶@里只實(shí)現(xiàn)兩種常用的圖表,其他類(lèi)型圖表讀者可以觸類(lèi)旁通。我們先給出柱狀圖的實(shí)現(xiàn),餅圖的實(shí)現(xiàn)再來(lái)跟柱狀圖進(jìn)行比較。
package lius.chart.demo; |
程序運(yùn)行結(jié)束后生成的圖片文件效果如下圖所示:
圖4

如果是使用簡(jiǎn)單的數(shù)據(jù)即使用getDataSet方法獲取數(shù)據(jù)集時(shí)產(chǎn)生的圖片文件如下:
圖5

對(duì)于餅圖而言,數(shù)據(jù)集的獲取用的不是同一個(gè)數(shù)據(jù)集類(lèi),另外餅圖不支持同一個(gè)類(lèi)別的項(xiàng)目中還有子項(xiàng)目這樣的數(shù)據(jù)。我們只給出創(chuàng)建餅圖的代碼,至于寫(xiě)圖表到一個(gè)文件則與柱狀圖一致,無(wú)需重復(fù)。
package lius.chart.demo; |
生成的餅圖文件效果如下:
圖6

![]() ![]() |
![]()
|
為了將生成的圖表直接傳給客戶(hù)端瀏覽器,只需要將前面兩個(gè)例子中的文件流換成是通過(guò)HttpServletResponse對(duì)象獲取到的輸出流,詳細(xì)代碼清單如下:
package lius.chart.demo; |
![]() ![]() |
![]()
|
很 多情況我們不僅僅要求可以在瀏覽器上顯示一個(gè)圖表,我們更需要客戶(hù)可以直接在圖表上做一下交互的操作,例如獲取信息提示,點(diǎn)擊圖表某個(gè)部分進(jìn)行更詳細(xì)信息 的展示等等。例如前面生成的簡(jiǎn)單柱狀圖,用戶(hù)需要在看到柱狀圖后點(diǎn)擊某種水果例如是蘋(píng)果即可看到各個(gè)地區(qū)蘋(píng)果產(chǎn)量的情況。為此就要求該圖形具有交互操作的 功能。在HTML中為了讓一個(gè)圖像具有可交互的功能就必須給該圖像定義一個(gè)Map對(duì)象。下表節(jié)選一段具有該功能的HTML代碼
<MAP NAME="chartMap"> |
由此就產(chǎn)生了一個(gè)問(wèn)題:如果根據(jù)一個(gè)圖像來(lái)生成對(duì)應(yīng) 的MAP對(duì)象。我們回頭看看剛才的代碼,在創(chuàng)建一個(gè)圖表對(duì)象時(shí)候有兩個(gè)參數(shù),我們舉柱狀圖的例子來(lái)講這兩個(gè)參數(shù)就是ChartFactory. createBarChart3D方法中的最后兩個(gè)參數(shù),這兩個(gè)參數(shù)的類(lèi)型都是布爾值。這兩個(gè)參數(shù)意思分別是:是否創(chuàng)建工具提示(tooltip)以及是 否生成URL。這兩個(gè)參數(shù)分別對(duì)應(yīng)著MAP中一個(gè)AREA的title屬性以及href屬性。
可是我想知道的是怎么來(lái)產(chǎn)生這個(gè)MAP??!哈哈,不要著急,JFreeChart已經(jīng)幫我們做好生成MAP對(duì)象的功能。 為了生成MAP對(duì)象就要引入另外一個(gè)對(duì)象:ChartRenderingInfo。因?yàn)镴FreeChart沒(méi)有直接的方法利用一個(gè)圖表對(duì)象直接生成 MAP數(shù)據(jù),它需要一個(gè)中間對(duì)象來(lái)過(guò)渡,這個(gè)對(duì)象就是ChartRenderingInfo。下圖是生成MAP數(shù)據(jù)的流程圖:
圖7

如 上圖所示,ChartUtilities類(lèi)是整個(gè)流程的核心,它周?chē)膶?duì)象都是一些例如數(shù)據(jù)對(duì)象或者是文件等。這個(gè)流程簡(jiǎn)單描述如下:首先創(chuàng)建一個(gè) ChartRenderingInfo對(duì)象并在調(diào)用ChartUtilities的writeChartAsJPEG時(shí)作為最后一個(gè)參數(shù)傳遞進(jìn)去。調(diào)用該 方法結(jié)束后將產(chǎn)生一個(gè)圖像文件以及一個(gè)填充好MAP數(shù)據(jù)的ChartRenderingInfo對(duì)象,有了這個(gè)對(duì)象我們還是沒(méi)有辦法獲取具體的MAP數(shù) 據(jù),我們還必須借助于ChartUtilities的writeImageMap方法來(lái)將ChartRenderingInfo對(duì)象讀取出來(lái),獲取MAP 數(shù)據(jù)的代碼片斷如下:
PrintWriter w = null; |
打開(kāi)文件D:\fruit.map,文件的內(nèi)容就是 要寫(xiě)到頁(yè)面上的MAP數(shù)據(jù)。把生成的圖像文件以及MAP數(shù)據(jù)文件寫(xiě)到頁(yè)面上即可完成熱點(diǎn)圖表的功能。至于怎么結(jié)合兩者之間的關(guān)系例如圖像的useMap屬 性值必須與MAP對(duì)象的名稱(chēng)結(jié)合起來(lái),必須根據(jù)實(shí)際的應(yīng)用情況進(jìn)行相應(yīng)的處理。筆者建議把二者通過(guò)標(biāo)簽庫(kù)封裝起來(lái),圖像文件的名稱(chēng)以及MAP對(duì)象的名稱(chēng)由 標(biāo)簽庫(kù)統(tǒng)一進(jìn)行控制,這樣可以保證二者的一致性。
![]() | ||
![]() | 劉冬,他已經(jīng)不再叫鳳梨罐頭了。珠海市創(chuàng)我科技發(fā)展有限公司軟件工程師,主要從事在J2EE平臺(tái)上實(shí)現(xiàn)商業(yè)智能(BI)方面的開(kāi)發(fā)。
|