JFreeChart組件在基於JSP的Web統計圖表中的應用與實現
摘 要：本文以實際項目中問題的需求，在分析了JFreeChart組件結構的基礎上，以柱狀圖爲例，詳細介紹了其在JSP中開發基於Web的統計圖表的方法。
關鍵詞：JFreeChart Web圖表 JSP
1 概述
創建一個可以在Web瀏覽器上查看的圖表一般有兩種做法：第一種是使用Applet利用Java本身對圖形的支持來顯示一個圖表；第二種是直接在Web服務器端生成好圖表圖片文件後發送給瀏覽器。第一種方式顯然對於客戶端要求太高，這種方式比較適合局域網的應用，而對於因特網的環境就顯得不太適合了。本文介紹的是一個基於Java的圖表引擎JFreeChart，他可用在服務器端產生圖表。
JFreeChart是開放源代碼站點SourceForge.net上的一個Java項目，它主要用來開發生成各種各樣的圖表，這些圖表包括：餅圖、柱狀圖(普通柱狀圖以及堆棧柱狀圖)、線圖、區域圖、分佈圖、混合圖、甘特圖以及一些儀表盤等等。本文主要以柱狀圖爲例介紹其使用方法，基於此可以去開發其他樣式的圖表。
2 環境和資源
在之前必須先準備好開發環境，因爲是基於Web瀏覽器的圖表展現，因此需要一個Servlet引擎或者是J2EE應用服務器。本文的JSP環境是Tomcat 5.0+jdk1.5.0，具體配置不在此詳述。
JFreeChart可以到http://www.jfree.org/jfreechart/站點下載，當前最新版本是1.0.0，本文以0.9.11版本進行調試，其核心對象類如表1所示。
表1 JFreeChart中核心的對象類
|
類名
|
類的作用以及簡單描述
|
|
JFreeChart
|
圖表對象，任何類型的圖表的最終表現形式都是在該對象進行一些屬性的定製。JFreeChart引擎本身提供了一個工廠類用於創建不同類型的圖表對象
|
|
XXXXXDataset
|
數據集對象，用於提供顯示圖表所用的數據。根據不同類型的圖表對應着很多類型的數據集對象類
|
|
XXXXXPlot
|
圖表區域對象，基本上這個對象決定着什麼樣式的圖表，創建該對象的時候需要Axis、Renderer以及數據集對象的支持
|
|
XXXXXAxis
|
用於處理圖表的兩個軸：縱軸和橫軸
|
|
XXXXXRenderer
|
負責如何顯示一個圖表對象
|
|
XXXXXURLGenerator
|
用於生成Web圖表中每個項目的鼠標點擊鏈接
|
|
XXXXXToolTipGenerator
|
用於生成圖象的幫助提示，不同類型圖表對應不同類型的工具提示類
|
解壓縮文件jfreechart-0.9.11，jfreechart-0.9.11.jar和 lib/jcommon-0.8.6.jar，lib/gnujaxp.jar，是開發運行需要的文件，把這三個文件放置到應用的lib目錄下。然後在web.xml文件中配置以下內容：
<Servlet>
<Servlet-name>Display Chart</servlet-name>
<Servlet-class>org.jfree.chart.servlet.DisplayChart</servlet-class>
</servlet>
安裝配置完成，就可以編寫程序來生成所需統計圖。
3 使用JFreeChart生成柱狀圖表
首先看一個最簡單的例子，圖片中的各類屬性都採用默認值。
<%@ Page content Type="text/html; charset=GBK"%>
<%@ Page import="org.jfree.chart.ChartFactory,
org.jfree.chart.JFreeChart,
org.jfree.chart.plot.PlotOrientation,
org.jfree.chart.servlet.ServletUtilities,
org.jfree.data.DefaultCategoryDataset"%>
<%
DefaultCategoryDataset dataset = new DefaultCategoryDataset();
dataset.addValue(32, "大觀圓", "已售");
dataset.addValue(18, "大觀圓", "待售");
dataset.addValue(18, "大觀圓", "預訂");
dataset.addValue(28, "大觀圓", "認購");
dataset.addValue(8, "大觀圓", "預留");
JFreeChart chart = ChartFactory.createBarChart3D("房屋銷量統計圖","房屋狀態",
"銷量",dataset, PlotOrientation.VERTICAL, False,false,false);
String filename = ServletUtilities.saveChartAsPNG(chart, 300, 260, null, session);
String graphURL =request.getContextPath()+"/servlet/DisplayChart?filename="+filename;
%>
<Imgsrc="<%=graphURL%>"width=500 height=300 border=0 use map="#<%=filename%>">
 圖2 簡單柱狀圖 圖3
組合數據集圖 |
上面的程序簡單，但生成的柱狀圖也很簡單。更多的時候，我們可能需要不同的效果。 org.jfree.chart.ChartFactory 這個工廠類有 createBarChart, createStackedBarChart, createBarChart3D, createStackedBarChart3D 這幾個工廠方法用於創建不同類型的柱狀圖。關於這四個方法的 JFreeChart 的 Java Doc API 文檔有詳細說明，比較重要的是 PlotOrientation.VERTICAL 讓平行柱垂直顯示，而 PlotOrientation.HORIZONTAL 則讓平行柱水平顯示。
幾個對柱狀圖影響較大的幾個類，它們分別是：
org.jfree.chart.axis.CategoryAxis
org.jfree.chart.axis.ValueAxis
org.jfree.chart.renderer.BarRenderer
org.jfree.chart.renderer.BarRenderer3D
我們通過程序看其效果。
<%@ Page import="java.awt.Color,
Java.awt.Font,
Org.jfree.chart”%>
<%
Double [][] data=new double [][]{{34, 16, 23, 26, 9}, {12, 35, 10, 34, 26}, {23, 16, 33, 24, 26}};
String[] row Keys = {"已售","待售","訂購"};
String [] column Keys = {"A#","B#","C#","D#","E#"};
Category Dataset dataset=DatasetUtilities.createCategoryDataset (rowKeys, columnKeys, data);
//創建JFreeChart，都使用Chart Factory來創建JFreeChart,很標準的工廠設計模式
JFreeChart chart = ChartFactory.createBarChart3D("大觀圓銷量圖統計",null,null,dataset,
PlotOrientation.VERTICAL, true, false, false);
Chart.setBackgroundPaint (Color. WHITE);
Category Plot plot = chart.getCategoryPlot ();
Category Axis domain Axis = plot.getDomainAxis ();
domainAxis.setVerticalCategoryLabels(false);
Plot.setDomainAxis (domainAxis);
ValueAxis range Axis = plot.getRangeAxis ();
rangeAxis.setUpperMargin(0.15); //設置最高的一個 Item 與圖片頂端的距離
//設置最低的一個 Item 與圖片底端的距離
rangeAxis.setLowerMargin(0.15);
plot.setRangeAxis(rangeAxis);
BarRenderer3D renderer = new BarRenderer3D();
renderer.setBaseOutlinePaint(Color.BLACK);
renderer.setWallPaint(Color.gray); //設置 Wall 的顏色
//設置每種水果代表的柱的顏色
renderer.setSeriesPaint(0, Color.RED);
renderer.setSeriesPaint(1, new Color (0, 100, 255));
renderer.setSeriesPaint(2, Color. GREEN);
renderer.setItemMargin(0.1); //設置每個地區所包含的平行柱的之間距離
//顯示每個柱的數值，並修改該數值的字體屬性
renderer.setItemLabelGenerator(new StandardCategoryItemLabelGenerator());
renderer.setItemLabelsVisible(true);
plot.setRenderer(renderer);
plot.setForegroundAlpha(0.6f); //設置柱的透明度
//設置地區、銷量的顯示位置
plot.setDomainAxisLocation(AxisLocation.TOP_OR_RIGHT);
plot.setRangeAxisLocation(AxisLocation.BOTTOM_OR_RIGHT);
// 把生成的文件寫入到臨時的目錄中
String filename = ServletUtilities.saveChartAsPNG(chart, 500, 300, null, session);
String graphURL = request.getContextPath () + "/servlet/DisplayChart? filename=" + filename; //選擇存儲成png格式的文件，也可以使用saveChartAsJPEG的方法生成jpg圖片
%>
<Img src="<%=graphURL%>"width=500 height=300 border=0 usemap="#<%=filename%>">
此JSP程序的運行結果如圖3所示。
除柱狀圖外，可以用JFreeChart開發其他各種圖表，部分效果圖例如圖4所示。限於篇幅，原程序代碼不再給出，具體使用方法參考JFreeChart的Java Doc API文檔和Sample Code。
|
(d)線圖 (e) 時間序列圖
圖4 部分效果圖例
|
4 高級主題
|
圖5 生成MAP數據的流程圖
|
有些情況下不僅要求在瀏覽器上顯示一個圖表，更需要可以直接在圖表上做交互的操作，例如獲取信息提示，點擊圖表某個部分進行更詳細信息的展示等等。在HTML中爲了讓一個圖像具有可交互的功能就必須給該圖像定義一個Map對象。JFreeChart具有生成MAP對象的功能，由於JFreeChart沒有直接的方法利用一個圖表對象直接生成MAP數據，它需要一箇中間對象ChartRenderingInfo來過渡，圖5所示是生成MAP數據的流程圖：
Chart Utilities類是整個流程的核心，這個流程簡單描述如下：首先創建一個ChartRenderingInfo對象並在調用Chart Utilities的writeChartAsJPEG時作爲最後一個參數傳遞進去。調用該方法結束後將產生一個圖像文件以及一個填充好MAP數據的ChartRenderingInfo對象，藉助於Chart Utilities的writeImageMap方法來將ChartRenderingInfo對象讀取出來，把生成的圖像文件以及MAP數據文件寫到頁面上即可完成熱點圖表的功能。
5 結束語
需要說明的是雖然JFreeChart是一個開源項目，但是其文檔是需要購買的。還有一個問題是JFreeChart如果使用中文，它使用的默認字體顯示出來的中文會很模糊，可能需要修改代碼。本文通過介紹利用JFreeChart生成柱狀統計圖的方法，旨在拋磚引玉，讀者基於此可以去開發其它各種圖表，這些不同式樣的圖表基本上可以滿足目前的需求。
參考資源
[1] 飛思科技產品研發中心. JSP應用開發詳解釋. 電子工業出版社. 2004.01
[2] Eckel.B著 侯捷譯， Java編程思想， 機械工業出版社， 2002.09
[3] http://www.jfree.org/jfreechart/index.html