使用JfreeChart開(kāi)發(fā)圖表經(jīng)驗(yàn)總結(jié)（含源碼）
Keith He 2005年10月27日
最近，公司一項(xiàng)目要出很多的圖表。由于項(xiàng)目是B/S架構(gòu)的，所以生成的圖表也要考慮能在瀏覽器上動(dòng)態(tài)顯示。
生成基于瀏覽器的圖表方式比較多。據(jù)我所知道的，常用的有三種：
1、VML方式實(shí)現(xiàn)。這種方式是通過(guò)產(chǎn)生客戶端的代碼，由客戶端根據(jù)代碼生成相應(yīng)的圖表。但這種方式產(chǎn)生的圖表有很多的局限性，如受限于瀏覽器，有些瀏覽器可能并不支持VML。另外，沒(méi)有封裝完整的圖表開(kāi)發(fā)包。
2、通過(guò)applet來(lái)產(chǎn)生圖表。這種方式也對(duì)客戶端要求比較高，必須要有JRE，而且通過(guò)applet生成的圖表在加載過(guò)程中會(huì)有個(gè)Java的Log動(dòng)畫。用戶看了可能會(huì)感覺(jué)不太舒服。
3、通過(guò)服務(wù)端直接生成圖表的圖片。這種方式對(duì)客戶端幾乎沒(méi)有什么要求，缺點(diǎn)是加重了服務(wù)端的負(fù)擔(dān)，對(duì)服務(wù)端要求就相對(duì)高了點(diǎn)。
經(jīng)過(guò)比較，根據(jù)項(xiàng)目自身特點(diǎn)，我們打算采用第三種方式來(lái)開(kāi)發(fā)圖表。為了縮短開(kāi)發(fā)周期、節(jié)約成本，我們選用了開(kāi)源的JFreeChart(http://www.jfree.org/jfreechart/)。
jfreechart是一個(gè)免費(fèi)創(chuàng)建圖表的java工具，目前最新版本是JFreeChart-1.0.0-rc1。它可以生成各式各樣的圖表。這些圖表包括餅圖、柱狀圖、線形圖、區(qū)域圖、甘特圖等等，基本可以滿足各種項(xiàng)目的要求。但在開(kāi)發(fā)過(guò)程中我也發(fā)現(xiàn)了JFreeChart的一些不足，或者說(shuō)有些稱得上是BUG。總體說(shuō)來(lái)，JFreeChart還是個(gè)優(yōu)秀的開(kāi)源項(xiàng)目。
關(guān)于JFreeChart生成圖表的文章比較多了，我主要談?wù)勈褂肑FreeChart的一些比較棘手問(wèn)題以及解決方法。同時(shí)也會(huì)將問(wèn)題所用到的源碼（JFreeChart-1.0.0-rc1+Struts1.2.4）從項(xiàng)目中抽象出來(lái)一起提供給大家。
一、 圖片上熱點(diǎn)鏈接中文亂碼的解決方法
這個(gè)問(wèn)題是在我查閱關(guān)于JFreeChart相關(guān)資料時(shí)出現(xiàn)頻率最高的一個(gè)問(wèn)題。其實(shí)這個(gè)亂碼問(wèn)題不能怪罪于JFreeChart。有人甚至就因此認(rèn)為JFreeChart對(duì)中文支持不太完善，JFreeChart可要叫了：我是冤枉的！
我們來(lái)找出問(wèn)題產(chǎn)生的原因，這個(gè)問(wèn)題也就不難解決了。
首先查看一下出現(xiàn)問(wèn)題頁(yè)面的Html源文件，你會(huì)發(fā)現(xiàn)在源文件的開(kāi)頭多出了一段map代碼，代碼類似于這樣：
<map id="chart-30928.png" name="chart-30928.png">
<area shape="poly" coords="179,163,176,154,174,145" title="洗衣機(jī)=315(29.86%)" alt=""/>
…………
</map>
<html>
<head>
…………
這部分map代碼其實(shí)是JFreeChart產(chǎn)生的，是用來(lái)產(chǎn)生圖片上的熱點(diǎn)鏈接，這也是問(wèn)題產(chǎn)生的根源所在。你的Jsp頁(yè)面通過(guò)<%@ page contentType="text/html; charset=UTF-8" %>或者<%@ page contentType="text/html; charset=GBK" %>來(lái)設(shè)置contentType這無(wú)可厚非，但map并不是由這個(gè)jsp頁(yè)面產(chǎn)生的。它是JFreeChart通過(guò)PrintWriter產(chǎn)生的。查看一下你生成圖片的Chart源碼，其中有ChartUtilities.writeImageMap(pw, filename, info, false)這樣的語(yǔ)句。這是用來(lái)向頁(yè)面寫入map代碼的。默認(rèn)情況下，map代碼會(huì)以服務(wù)器默認(rèn)編碼(ISO-8859-1)輸出。這就和你的Jsp編碼不一致，從而產(chǎn)生亂碼。
原因找到了，問(wèn)題也就不難解決的。設(shè)置PrintWriter的contentType與Jsp的contentType保存一致就可以了。代碼如下（筆者的Web應(yīng)用是基于Struts框架的）：
//PieMothAciton.java
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
//設(shè)置輸出編碼格式
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
…………
String filename = chart.generatePieChart3D("月統(tǒng)計(jì)比例圖",
session, out);
String graphURL = request.getContextPath()
+ "/servlet/DisplayChart?filename=" + filename;
request.setAttribute("filename",filename);
request.setAttribute("graphURL",graphURL);
return mapping.findForward(SUCCESS);
}
重新部署你的Web應(yīng)用，中文亂碼文件就可以解決了。
二、 餅圖顯示百分比
在餅圖中JFreeChart默認(rèn)只顯示選項(xiàng)和數(shù)值，沒(méi)有顯示各項(xiàng)所占比例。由于手頭沒(méi)有1.0版的JFreeChart Developer Guide（這可是要錢的，后來(lái)想想即使有，也未必能找到關(guān)于百分比這方面的說(shuō)明），再加上DEMO中的餅圖都沒(méi)有顯示百分比，無(wú)法參考。后來(lái)在網(wǎng)上找到了一個(gè)老版本的例子，其中能顯示百分比。它是通過(guò)在PiePlot中設(shè)置的：
PiePlot pie;
pie.setPercentFormatString("#,###0.0#%");
但1.0版本中根本就找不到setPercentFormatString這方法，JFreeChart各版本之間改動(dòng)比較大，很難兼容。還好它是開(kāi)源的，把它的源碼都搜索了一遍，認(rèn)真讀了一些源碼，終于理出了頭緒。
原來(lái)在1.0.0-rc1版中顯示百分比已經(jīng)調(diào)整到StandardPieItemLabelGenerator構(gòu)造函數(shù)中了，StandardPieItemLabelGenerator有三個(gè)構(gòu)造函數(shù)。StandardPieItemLabelGenerator()不顯示各項(xiàng)所占比例。另外兩個(gè)可以顯示比例。代碼如下：
plot.setLabelGenerator(new StandardPieItemLabelGenerator(StandardPieItemLabelGenerator.DEFAULT_TOOLTIP_FORMAT));
//或者采用下面自定義樣式顯示，{0}表示選項(xiàng)，{1}表示數(shù)值，{2}表示所占比例
plot.setLegendLabelGenerator(new StandardPieItemLabelGenerator("{0}: ({1}M, {2})"));
效果如下圖：
默認(rèn)顯示百分比是取整的，如果要讓百分比保留二位小數(shù)，可以用第三個(gè)構(gòu)造函數(shù)：
plot.setLabelGenerator(new StandardPieItemLabelGenerator(“{0}={1}({2})”,
NumberFormat.getNumberInstance(),
new DecimalFormat("0.00%")));
效果如下圖：
三、 混合圖表（不同類型的圖混合顯示）
我們經(jīng)常用的是柱狀圖、曲線圖、和餅圖，這三類型圖基本能滿足大部分項(xiàng)目的需求。但有些項(xiàng)目比較特殊，可能需要在一張圖上同時(shí)顯示不同類型的圖。這在JFreeChart中可以輕松實(shí)現(xiàn)。例如我們要做個(gè)流量監(jiān)控的系統(tǒng)，該系統(tǒng)一天中在不同的時(shí)間段有不同的閥值（最大值），該閥值表示成階梯線。而實(shí)際流量就是個(gè)曲線了。當(dāng)流量在某個(gè)時(shí)段內(nèi)超過(guò)閥值時(shí)就觸發(fā)相應(yīng)的事件（如限流）。要表示閥值和流量的對(duì)比關(guān)系就需要兩種類型的圖片在同一張圖表上表示，如下圖：
首先像創(chuàng)建普通圖表一樣來(lái)創(chuàng)建圖片，筆者先創(chuàng)建了一個(gè)XYStep Chart。然后創(chuàng)建第二圖表的Renderer，再分別將第二圖表的Dataset、Renderer添加進(jìn)第一圖表的plot。實(shí)例代碼如下：
//MultipleChart.java
JFreeChart jfreechart = ChartFactory.createXYStepAreaChart("監(jiān)控設(shè)置",
"時(shí)刻",
"流量",
xydataset,
PlotOrientation.VERTICAL,
true,
true,
false);
XYPlot xyplot = jfreechart.getXYPlot();
…………
//設(shè)置第二圖表的Renderer
StandardXYItemRenderer standardxyitemrenderer = new StandardXYItemRenderer();
standardxyitemrenderer.setToolTipGenerator(new StandardXYToolTipGenerator("{0}({1}) = {2}",
new SimpleDateFormat("HH:mm"),
new DecimalFormat("#,##0")));
//將第二圖表的Dataset、Renderer添加進(jìn)xyplot
xyplot.setDataset(1, lineDataset);
xyplot.setRenderer(1,standardxyitemrenderer);
這樣就創(chuàng)建了曲線和階梯的混合圖表。
四、 其它問(wèn)題
1) 版本問(wèn)題。
JFreeChart的各版本變動(dòng)比較大，這在升級(jí)版本時(shí)是比較頭疼的問(wèn)題，升級(jí)時(shí)需要改動(dòng)你代碼的地方可能比較多。因此盡量采用最新的版本，新版本的文檔可能比較少，但問(wèn)題要相對(duì)少一些，在舊版中就出現(xiàn)過(guò)標(biāo)注數(shù)值重疊在一起這樣的問(wèn)題。好的是JFreeChart是開(kāi)源的，碰到解決不了的問(wèn)題可以從源碼中找到有參考價(jià)值的信息。
2) 設(shè)置背景透明度的BUG
不知道這是不是JFreeChart的一個(gè)BUG。利用chart.setBackgroundImageAlpha(0.5f)來(lái)設(shè)置背景透明度，ServletUtilities.saveChartAsPNG保存圖片。將chart.setBackgroundImageAlpha(0.5f)注釋掉再生成圖片，發(fā)現(xiàn)兩張圖片是一樣的。也就是說(shuō)setBackgroundImageAlpha方法無(wú)效，具體原因筆者還不太清楚，讀者大家可以自己測(cè)試看看。
以上是筆者在項(xiàng)目開(kāi)發(fā)中總結(jié)出來(lái)的，希望大家多提寶貴意見(jiàn)！
附源碼：JFeeChartProject_src.rar
# re: [原創(chuàng)]使用JfreeChart開(kāi)發(fā)圖表經(jīng)驗(yàn)總結(jié)(含源碼) 回復(fù)
2006-10-25 22:28 by
很不錯(cuò)~我前一段時(shí)間將JfreeChart用在SWT框架的程序里，用了一種比較笨的方法，使用了一個(gè)AWT-SWT的橋，是SWT-Designer里面自帶的一個(gè)工具類，感覺(jué)有些傻傻的。
# re: [原創(chuàng)]使用JfreeChart開(kāi)發(fā)圖表經(jīng)驗(yàn)總結(jié)(含源碼) 回復(fù)
2006-10-26 10:12 by
不錯(cuò)的文章。
如果在結(jié)尾部分，加上一些比較基礎(chǔ)的文章的連接更好。
這樣大家如果對(duì)jfreechar不了解的話，可以先看看那些基礎(chǔ)的文章。
# re: [原創(chuàng)]使用JfreeChart開(kāi)發(fā)圖表經(jīng)驗(yàn)總結(jié)(含源碼) 回復(fù)
2006-10-26 10:37 by
寫的不錯(cuò)，我們的項(xiàng)目中也正在使用jfreechart生成圖表，不過(guò)我們采用的是applet的方式，主要是考慮到服務(wù)器負(fù)載的問(wèn)題。另外，我們的項(xiàng)目中并沒(méi)有直接使用jfreechart，而是按照我們的需要重新封裝了一套接口。這樣，起碼在業(yè)務(wù)層可以保證代碼的穩(wěn)定
# re: [原創(chuàng)]使用JfreeChart開(kāi)發(fā)圖表經(jīng)驗(yàn)總結(jié)(含源碼) 回復(fù)
2006-10-26 10:37 by
確認(rèn)兩張圖片是一樣的嗎？ 因?yàn)?IE 不支持透明的 PNG 圖片的顯示， 所以我猜想可能不是 JFreeChart 的 bug， 你用別的瀏覽器試試看
# re: [原創(chuàng)]使用JfreeChart開(kāi)發(fā)圖表經(jīng)驗(yàn)總結(jié)(含源碼) 回復(fù)
2006-10-26 10:42 by
能不能把你的有關(guān)map部分的演示源代碼發(fā)給我，map部分一直沒(méi)有測(cè)試成功。謝謝
wuxufeng@ivo.com.cn
# re: [原創(chuàng)]使用JfreeChart開(kāi)發(fā)圖表經(jīng)驗(yàn)總結(jié)(含源碼) 回復(fù)
2006-10-26 11:21 by
現(xiàn)有就這個(gè)問(wèn)題了，我在jsp或者 用javabean調(diào)用都可以實(shí)現(xiàn)鏈接 ，但是在action中就沒(méi)有辦法把map的資料傳到頁(yè)面
下面是我action的代碼
public ActionForward list(ActionMapping actionMapping,
ActionForm actionForm, HttpServletRequest request,
HttpServletResponse response) throws Exception {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
HttpSession session = request.getSession();
DefaultPieDataset data = new DefaultPieDataset();
data.setValue("高中以下", 370);
data.setValue("高中", 1530);
data.setValue("大專", 5700);
data.setValue("本科", 8280);
data.setValue("碩士", 4420);
data.setValue("博士", 80);
JFreeChart chart = ChartFactory.createPieChart3D("月統(tǒng)計(jì)比例圖", data, true, true, true);
PiePlot3D plot = (PiePlot3D)chart.getPlot();
plot.setURLGenerator(new StandardPieURLGenerator("barview.jsp"));
chart.setBackgroundPaint(java.awt.Color.white);
plot.setToolTipGenerator(new StandardPieToolTipGenerator());
StandardEntityCollection sec = new StandardEntityCollection();
ChartRenderingInfo info = new ChartRenderingInfo(sec);
String filename = ServletUtilities.saveChartAsJPEG(chart, 500, 300, info, session);
//FileOutputStream fos_jpg = new FileOutputStream("d:\\fruit.jpg");
//ChartUtilities.writeChartAsJPEG(out,100, chart, 500, 300, info);
ChartUtilities.writeImageMap(out, "map0", info, false);
String graphURL = request.getContextPath() + "/servlet/DisplayChart?filename=" + filename;
request.setAttribute("filename", filename);
request.setAttribute("graphURL", graphURL);
return actionMapping.findForward("list");
}
# re: [原創(chuàng)]使用JfreeChart開(kāi)發(fā)圖表經(jīng)驗(yàn)總結(jié)(含源碼) 回復(fù)
2006-10-26 11:22 by
@thinkbase.net
IE支持PNG顯示，我這里顯示沒(méi)有任何問(wèn)題。本文原來(lái)是個(gè)Word文檔，我導(dǎo)成HTML的，發(fā)現(xiàn)里面附圖PNG的要比JPG的要清晰，就把PNG帖了上來(lái)。
# re: [原創(chuàng)]使用JfreeChart開(kāi)發(fā)圖表經(jīng)驗(yàn)總結(jié)(含源碼) 回復(fù)
2006-10-27 07:50 by
對(duì)不起，你那里面沒(méi)有源代碼啊 ，只有發(fā)布的程序，你再看一下
# re: [原創(chuàng)]使用JfreeChart開(kāi)發(fā)圖表經(jīng)驗(yàn)總結(jié)(含源碼) 回復(fù)
2006-10-27 09:52 by
@風(fēng)人園
有的，在WEB-INF\src
# re: [原創(chuàng)]使用JfreeChart開(kāi)發(fā)圖表經(jīng)驗(yàn)總結(jié)(含源碼) 回復(fù)
2006-10-28 14:57 by
再請(qǐng)問(wèn)一個(gè)問(wèn)題，除了 pie可以，其他的可以嗎？
我用的是jfreechart 1.01,我通過(guò)設(shè)定
plot.setURLGenerator(new StandardPieURLGenerator("barview.do?from=xxx"));
可以實(shí)現(xiàn)鏈接，但是，其他的圖好像沒(méi)有這個(gè)方法，只有piePlot才有這個(gè)方法
