使用JFreeChart來創(chuàng)建基于web的圖表

1、使用 jfreechart來創(chuàng)建基于web的圖表www的發(fā)展使得基于因特網的應用程序不再局限于靜態(tài)或者簡單的動態(tài)內容提供。傳統的一些以軟件包形式發(fā)布應用程序例如報表系統等都在逐漸搬到因特網上。但是這兩者之間有著天壤之別，雖然對于數據獲取、業(yè)務處理等方面基本類似，但是最大的差別在于用戶界面。為了能在web瀏覽器上顯示要求用戶界面使用html以及圖片的方式來展現數據，而傳統的一些利用操作系統本身的控件來開發(fā)的用戶界面無法適應琳瑯滿目的客戶端，因此在這里也變得無能為力。為了創(chuàng)建一個可以在web瀏覽器上查看到圖表,一般有兩種做法：第一種就是使用applet利用java本身對圖形的支持來顯示一個圖表；第

2、二種就是直接在web服務器端生成好圖表圖片文件后發(fā)送給瀏覽器。第一種方式顯然對于客戶端要求太高，隨著現在主流瀏覽器放棄對java的支持后，這種方式只適合一些局域網的應用，而對于因特網的環(huán)境就顯得不太適合。因此我們下面將介紹一個java的圖表引擎jfreechart用來產生基于web的圖表。jfreechart項目簡介jfreechart是開放源代碼站點sourcef上的一個java項目，它主要用來各種各樣的圖表，這些圖表包括：餅圖、柱狀圖、線圖、區(qū)域圖、分布圖、混合圖、甘特圖以及一些儀表盤等等。這些不同樣式的圖表基本上可以滿足目前的要求。為了減少篇幅本文主要介紹前面三種類型的圖表，讀者可以觸類

3、旁通去開發(fā)其他樣式的圖表。下面三個是jfreechart產生的這三種類型圖表的結果：圖1柱狀圖圖2餅圖圖3線圖上面的三個圖都是表示四個季度的某個產品的銷量信息。 下載與使用jfreechart主頁：/jfreechart/index.htmljfreechart下載頁面：下載最新的版本，解壓后，將lib目錄下的jfreechart-*.*.*.jar、gnujaxp.jar和jcommon-1.0.10.jar這三個包放入工程的webrootweb-inflib下就可以使用了。解讀jfreechart的源碼結構在開始使用jfreechart之前我們有必要先

4、大概了解一下jfreechart本身的結構以及它所帶一些例子程序，這樣有助于我們下一步自行開發(fā)。下載jfreechart包后已經帶有非常豐富的例子，因為jfreechart這個項目本身的使用文檔非常少，因此學習它最好的辦法就是學習它所帶的例子源碼。在包org.jfree.chart.demo中有幾十個文件用于展示jfreechart所能支持的所有圖表的結果。下面我們來介紹jfreechart中幾個核心的對象類：類名類的作用以及簡單描述jfreechart圖表對象，任何類型的圖表的最終表現形式都是在該對象進行一些屬性的定制。jfreechart引擎本身提供了一個工廠類用于創(chuàng)建不同類型的圖表對象x

5、xxxxdataset數據集對象，用于提供顯示圖表所用的數據。根據不同類型的圖表對應著很多類型的數據集對象類xxxxxplot圖表區(qū)域對象，基本上這個對象決定著什么樣式的圖表，創(chuàng)建該對象的時候需要axis、renderer以及數據集對象的支持xxxxxaxis用于處理圖表的兩個軸：縱軸和橫軸xxxxxrenderer負責如何顯示一個圖表對象xxxxxurlgenerator用于生成web圖表中每個項目的鼠標點擊鏈接xxxxxtooltipgenerator用于生成圖象的幫助提示，不同類型圖表對應不同類型的工具提示類基本上我認為jfreechart項目本身的類結構的設計并不是很好，首先在創(chuàng)建圖表

6、的時候用到了大量的工廠方法，這樣做雖然可以簡化創(chuàng)建圖表對象的代碼，但是對項目本身或者開發(fā)人員來講自行擴展一種新的圖表都仍然是一件很麻煩的事情；其次除圖表對象本身外其余的類過于復雜，使用者必須去了解每個類型的圖表對象應該對應哪些axis、plot、renderer類，并且必須非常熟悉這些類的構造函數中每個參數的具體含義。這些問題都大大困擾很多初學者。不過，雖然存在很多問題，但是jfreechart本身仍不失為一個非常優(yōu)秀的圖表引擎，況且項目本身也在逐漸的發(fā)展中。 在非常簡略的介紹了jfreechart本身的代碼結構后，下面我們開始動手試驗幾個常用的圖表并把他們放到web上。使用jfreechar

7、t生成各種樣式的圖表限于篇幅的問題我們在這里只實現兩種常用的圖表，其他類型圖表讀者可以觸類旁通。我們先給出柱狀圖的實現，餅圖的實現再來跟柱狀圖進行比較。 1、柱狀圖import java.io.*;import org.jfree.data.*;import org.jfree.data.category.categorydataset;import org.jfree.data.category.defaultcategorydataset;import org.jfree.chart.*;import org.jfree.chart.plot.*;/* * 該類用于演示最簡單的柱狀圖生成

8、* author winter lau */public class barchartdemo public static void main(string args) throws ioexceptioncategorydataset dataset = getdataset2();jfreechart chart = chartfactory.createbarchart3d("水果產量圖", / 圖表標題"水果", / 目錄軸的顯示標簽"產量", / 數值軸的顯示標簽dataset, / 數據集plotorientation.v

9、ertical, / 圖表方向：水平、垂直true, / 是否顯示圖例(對于簡單的柱狀圖必須是false)false, / 是否生成工具false / 是否生成url鏈接);fileoutputstream fos_jpg = null;try fos_jpg = new fileoutputstream("d:fruit.jpg");chartutilities.writechartasjpeg(fos_jpg,100,chart,400,300,null); finally try fos_jpg.close(); catch (exception e) /* * 獲取

10、一個演示用的簡單數據集對象 * return */private static categorydataset getdataset() defaultcategorydataset dataset = new defaultcategorydataset();dataset.addvalue(100, "上海", "蘋果");dataset.addvalue(200, "上海", "梨子");dataset.addvalue(300, "上海", "葡萄");dataset

11、.addvalue(400, "上海", "香蕉");dataset.addvalue(500, "上海", "荔枝");return dataset;/* * 獲取一個演示用的組合數據集對象 * return */private static categorydataset getdataset2() defaultcategorydataset dataset = new defaultcategorydataset();dataset.addvalue(100, "北京", "蘋

12、果");dataset.addvalue(100, "上海", "蘋果");dataset.addvalue(100, "廣州", "蘋果");dataset.addvalue(200, "北京", "梨子");dataset.addvalue(200, "上海", "梨子");dataset.addvalue(200, "廣州", "梨子");dataset.addvalue(300,

13、 "北京", "葡萄");dataset.addvalue(300, "上海", "葡萄");dataset.addvalue(300, "廣州", "葡萄");dataset.addvalue(400, "北京", "香蕉");dataset.addvalue(400, "上海", "香蕉");dataset.addvalue(400, "廣州", "香蕉"

14、;);dataset.addvalue(500, "北京", "荔枝");dataset.addvalue(500, "上海", "荔枝");dataset.addvalue(500, "廣州", "荔枝");return dataset;程序運行結束后生成的圖片文件效果如下圖所示：圖4如果是使用簡單的數據即使用getdataset方法獲取數據集時產生的圖片文件如下：圖52、餅圖對于餅圖而言，數據集的獲取用的不是同一個數據集類，另外餅圖不支持同一個類別的項目中還有子項目這樣的

15、數據。我們只給出創(chuàng)建餅圖的代碼，至于寫圖表到一個文件則與柱狀圖一致，無需重復。 import java.io.*;import org.jfree.data.*;import org.jfree.data.general.defaultpiedataset;import org.jfree.chart.*;/* * 用于演示餅圖的生成 * author winter lau */public class piechartdemo public static void main(string args) throws ioexceptiondefaultpiedataset data = get

16、dataset();jfreechart chart = chartfactory.createpiechart3d("水果產量圖", / 圖表標題data, true, / 是否顯示圖例false,false);/寫圖表對象到文件，參照柱狀圖生成源碼/* * 獲取一個演示用的簡單數據集對象 * return */private static defaultpiedataset getdataset() defaultpiedataset dataset = new defaultpiedataset();dataset.setvalue("蘋果",10

17、0);dataset.setvalue("梨子",200);dataset.setvalue("葡萄",300);dataset.setvalue("香蕉",400);dataset.setvalue("荔枝",500);return dataset;生成的餅圖文件效果如下： 圖6將生成的圖表移到瀏覽器上為了將生成的圖表直接傳給客戶端瀏覽器，只需要將前面兩個例子中的文件流換成是通過httpservletresponse對象獲取到的輸出流，詳細代碼清單如下： import java.io.ioexception;im

18、port javax.servlet.servletexception;import javax.servlet.http.httpservlet;import javax.servlet.*;import org.jfree.data.general.defaultpiedataset;import org.jfree.chart.*;/* * 演示通過servlet直接輸出圖表 * author winter lau */public class chartdemoservlet extends httpservlet public void service(servletrequest

19、req, servletresponse res)throws servletexception, ioexception res.setcontenttype("image/jpeg");defaultpiedataset data = getdataset();jfreechart chart = chartfactory.createpiechart3d("水果產量圖",data,true,false,false);chartutilities.writechartasjpeg(res.getoutputstream(),100,chart,400

20、,300,null);/* * 獲取一個演示用的簡單數據集對象 * return */private static defaultpiedataset getdataset() defaultpiedataset dataset = new defaultpiedataset();dataset.setvalue("蘋果",100);dataset.setvalue("梨子",200);dataset.setvalue("葡萄",300);dataset.setvalue("香蕉",400);dataset.set

21、value("荔枝",500);return dataset;高級主題很多情況我們不僅僅要求可以在瀏覽器上顯示一個圖表，我們更需要客戶可以直接在圖表上做一下交互的操作，例如獲取信息提示，點擊圖表某個部分進行更詳細信息的展示等等。例如前面生成的簡單柱狀圖，用戶需要在看到柱狀圖后點擊某種水果例如是蘋果即可看到各個地區(qū)蘋果產量的情況。為此就要求該圖形具有交互操作的功能。在html中為了讓一個圖像具有可交互的功能就必須給該圖像定義一個map對象。下表節(jié)選一段具有該功能的html代碼 。<map name="chartmap"><area sha

22、pe="rect" coords="81,15,126,254" href="?series=0&category=100" title="100 = 7,048" onclick="javascript:clickchart('100');return false;"><area shape="rect" coords="143,27,188,255" href="?series=0&category

23、=200" title="200 = 6,721" onclick="javascript: clickchart ('200');return false;"><area shape="rect" coords="205,54,250,255" href="?series=0&category=300" title="300 = 5,929" onclick="javascript: clickchart ('

24、300');return false;"><area shape="rect" coords="267,85,312,255" href="?series=0&category=400" title="400 = 5,005" onclick="javascript: clickchart ('400');return false;"><area shape="rect" coords="329,17

25、,374,255" href="?series=0&category=diet" title="diet = 7,017" onclick="javascript: clickchart ('diet');return false;"> </map>由此就產生了一個問題：如果根據一個圖像來生成對應的map對象。我們回頭看看剛才的代碼，在創(chuàng)建一個圖表對象時候有兩個參數，我們舉柱狀圖的例子來講這兩個參數就是chartfactory. createbarchart3d方法中的最后兩個參數，

26、這兩個參數的類型都是布爾值。這兩個參數意思分別是：是否創(chuàng)建工具提示(tooltip)以及是否生成url。這兩個參數分別對應著map中一個area的title屬性以及href屬性。 可是我想知道的是怎么來產生這個map啊！哈哈，不要著急，jfreechart已經幫我們做好生成map對象的功能。為了生成map對象就要引入另外一個對象：chartrenderinginfo。因為jfreechart沒有直接的方法利用一個圖表對象直接生成map數據，它需要一個中間對象來過渡，這個對象就是chartrenderinginfo。下圖是生成map數據的流程圖： 圖7如上圖所示，chartutilities類是整個流程的核心，它周圍的對象都是一些例如數據對象或者是文件等。這個流程簡單描述如下：首先創(chuàng)建一個chartrenderinginfo對象并在調用chartutilities的writechartasjpeg時作為最后一個參數傳遞進去。調用該方法結束后將產生一個圖像文件以及一個填充好map數據的chartrenderinginfo對象，有了這個對象我們還是沒有辦法獲取具體的map數據，我們還必須借助于chartutilities的writeimagemap方法來將chartrenderinginf