使用JFreeChart生成热点图表

＜一＞前言：

　　JFreeChart是开放源代码站点SourceForge.net上的一个JAVA项目。它的功能十分强大，能创建饼图、柱状图(普通柱状图以及堆栈柱状图)、线图、区域图、分布图、混合图、甘特图以及一些仪表盘等等，并可生成PNG或JPG图片格式文件。
　　本人在学习过程中发现，网上很多文章都是讲一些JFreeChart的基本应用，而对JFreeChart生成热点图表这样常用的功能虽有所提及却没有一个完整的例子，所以我就写一个简单示例供大家参考，希望对大家的学习有所帮助。

　　＜二＞示例说明：

　　假设有一个关于程序员北京，上海，广洲三地程序员学历，开发语言，薪金情况的调查。首先要以饼图显示程序员学历的分布情况(index.jsp)。点击饼图的每一部分会以柱状图显示该层次程序员所用开发语言和薪金的情况(barview.jsp)。重点演示怎样在饼图上添加链接。

　　＜三＞准备工作：

　　1.下载最新版本的JFreeChart,当前为jfreechart-1.0.0-rc1
下载地址：http://www.jfree.org/jfreechart/index.html

　　2.解压文件，将jfreechart-1.0.0-rc1/lib下的jcommon-1.0.0-rc1.jar，jfreechart-1.0.0-rc1.jar复制到WEB应用的lib目录下。

　　3.在web.xml文件中增加以下内容：

＜servlet＞
＜servlet-name＞DisplayChart＜/servlet-name＞
＜servlet-class＞org.jfree.chart.servlet.DisplayChart＜/servlet-class＞
＜/servlet＞
＜servlet-mapping＞
＜servlet-name＞DisplayChart＜/servlet-name＞
＜url-pattern＞/servletDisplayChart＜/url-pattern＞
＜/servlet-mapping＞

　　＜四＞饼图页面代码（index.jsp）

＜%@ page contentType="text/html;charset=GBK"%＞
＜%@ page import="org.jfree.data.general.DefaultPieDataset"%＞
＜%@ page import="org.jfree.chart.*"%＞
＜%@ page import="org.jfree.chart.plot.*"%＞
＜%@ page import="org.jfree.chart.servlet.ServletUtilities"%＞
＜%@ page import="org.jfree.chart.labels.StandardPieItemLabelGenerator"%＞
＜%@ page import="org.jfree.chart.urls.StandardPieURLGenerator"%＞
＜%@ page import="org.jfree.chart.entity.StandardEntityCollection"%＞
＜%@ page import="java.io.*"%＞
＜HTML＞
＜HEAD＞
＜META http-equiv=Content-Type content="text/html; charset=GBK"＞
＜TITLE＞[e-mail]＜/TITLE＞
＜/HEAD＞
＜BODY＞
＜%

DefaultPieDataset data = new DefaultPieDataset();
data.setValue("高中以下",370);
data.setValue("高中",1530);
data.setValue("大专",5700);
data.setValue("本科",8280);
data.setValue("硕士",4420);
data.setValue("博士",80);

PiePlot3D plot = new PiePlot3D(data);//3D饼图
plot.setURLGenerator(new StandardPieURLGenerator("barview.jsp"));//设定链接
JFreeChart chart = new JFreeChart("",JFreeChart.DEFAULT_TITLE_FONT, plot, true);
chart.setBackgroundPaint(java.awt.Color.white);//可选，设置图片背景色
chart.setTitle("程序员学历情况调查表");//可选，设置图片标题
plot.setToolTipGenerator(new StandardPieItemLabelGenerator());
StandardEntityCollection sec = new StandardEntityCollection();
ChartRenderingInfo info = new ChartRenderingInfo(sec);
PrintWriter w = new PrintWriter(out);//输出MAP信息
//500是图片长度，300是图片高度
String filename = ServletUtilities.saveChartAsPNG(chart, 500, 300, info, session);
ChartUtilities.writeImageMap(w, "map0", info, false);

String graphURL = request.getContextPath() + "/servlet/DisplayChart?filename=" + filename;

%＞

＜P ALIGN="CENTER"＞
＜img src="＜%= graphURL %＞" width=500 height=300 border=0 usemap="#map0"＞
＜/P＞
＜/BODY＞
＜/HTML＞

　　生成的图片如下

　　在浏览器中点右键－＞查看源文件会发现有以下一段HTML代码：

＜map id="map0" name="map0"＞
＜area shape="poly" coords="247,61,250,61,250,123,250,123" title="博士 = 80" alt="" href="barview.jsp?category=博士&pieIndex=0"/＞
＜area shape="poly" coords="148,112,153,102,160,92,170,83,182,76,196,70,212,65,229,62,247,61,250,123,250,123" title="硕士 = 4,420" alt="" href="barview.jsp?category=硕士&pieIndex=0"/＞
＜area shape="poly" coords="324,167,311,173,297,179,282,182,266,185,250,186,234,185,217,183,202,179,188,173,175,167,
　 165,159,157,151,151,142,147,132,146,122,148,112,250,123,250,123" title="本科 = 8,280" alt=""
　href="barview.jsp?category=本科&pieIndex=0"/＞
＜area shape="poly" coords="307,72,324,80,338,91,347,103,352,117,352,131,347,144,338,156,324,167,250,123,250,123" title="大专 = 5,700" alt="" href="barview.jsp?category=大专&pieIndex=0"/＞
＜area shape="poly" coords="261,62,285,65,307,72,250,123,250,123" title="高中
　= 1,530" alt="" href="barview.jsp?category=高中&pieIndex=0"/＞
＜area shape="poly" coords="250,61,261,62,250,123,250,123" title="高中以下 = 370" alt="" href="barview.jsp?category=高中以下&pieIndex=0"/＞
＜/map＞

　　这就是MAP信息，我们在IMG标签中加入usemap="#map0"就可以为饼图的每一部分加入链接。

　　＜五＞柱状图页面代码：(barview.jsp)

＜HTML＞
＜HEAD＞
＜META http-equiv=Content-Type content="text/html; charset=GBK"＞
＜TITLE＞[e-mail]＜/TITLE＞
＜/HEAD＞

＜body＞

＜%@ page contentType="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.category.*"%＞
＜%
CategoryDataset dataset;
String category=request.getParameter("category");
category= new String(category.getBytes("ISO8859_1"), "GBK");
if(category.equals("本科")||category.equals("高中")||category.equals("大专"))
{
　dataset=getDataSet();
}
else if(category.equals("硕士")||category.equals("博士"))
{
　dataset=getDataSet2();
}else
{
　dataset=getDataSet3();
}
String title=category+"程序员在各城市薪金情况统计";
JFreeChart chart = ChartFactory.createBarChart3D(title,
"城市",
"薪金",
dataset,
PlotOrientation.VERTICAL,
true,
false,
false);

String filename = ServletUtilities.saveChartAsPNG(chart, 500, 300, null, session);
String graphURL = request.getContextPath() + "/servlet/DisplayChart?filename=" + filename;
%＞
＜P ALIGN="CENTER"＞
＜img src="＜%= graphURL %＞" width=500 height=300 border=0 usemap="#＜%= filename %＞"＞
＜/P＞
＜%!
private static CategoryDataset getDataSet() {
　DefaultCategoryDataset dataset = new DefaultCategoryDataset();
　dataset.addValue(2000, "北京", "VB");
　dataset.addValue(1800, "上海", "VB");
　dataset.addValue(2200, "广州", "VB");
　dataset.addValue(3200, "北京", "JAVA");
　dataset.addValue(3500, "上海", "JAVA");
　dataset.addValue(3600, "广州", "JAVA");
　dataset.addValue(3300, "北京", "DOT NET");
　dataset.addValue(3400, "上海", "DOT NET");
　dataset.addValue(3700, "广州", "DOT NET");
　dataset.addValue(2500, "北京", "DELPHI");
　dataset.addValue(2800, "上海", "DELPHI");
　dataset.addValue(3200, "广州", "DELPHI");
　dataset.addValue(5000, "北京", "VC");
　dataset.addValue(3500, "上海", "VC");
　dataset.addValue(4600, "广州", "VC");
　return dataset;
}
private static CategoryDataset getDataSet2() {
　DefaultCategoryDataset dataset = new DefaultCategoryDataset();
　dataset.addValue(2000, "上海", "VB");
　dataset.addValue(3000, "北京", "JAVA");
　dataset.addValue(3330, "上海", "JAVA");
　dataset.addValue(3500, "广州", "JAVA");
　dataset.addValue(3500, "北京", "DOT NET");
　dataset.addValue(4000, "上海", "DOT NET");
　dataset.addValue(4800, "广州", "DOT NET");
　dataset.addValue(2600, "北京", "DELPHI");
　dataset.addValue(2200, "上海", "DELPHI");
　dataset.addValue(4000, "北京", "VC");
　dataset.addValue(4000, "上海", "VC");
　dataset.addValue(4200, "广州", "VC");
　return dataset;
}
private static CategoryDataset getDataSet3() {
　DefaultCategoryDataset dataset = new DefaultCategoryDataset();
　dataset.addValue(2100, "北京", "VB");
　dataset.addValue(2200, "上海", "VB");
　dataset.addValue(2100, "广州", "VB");
　dataset.addValue(3000, "北京", "JAVA");
　dataset.addValue(3200, "上海", "JAVA");
　dataset.addValue(3600, "广州", "JAVA");
　dataset.addValue(4100, "北京", "DOT NET");
　dataset.addValue(4200, "上海", "DOT NET");
　dataset.addValue(4160, "广州", "DOT NET");
　dataset.addValue(2400, "北京", "DELPHI");
　dataset.addValue(2600, "上海", "DELPHI");
　dataset.addValue(2500, "广州", "DELPHI");
　dataset.addValue(5400, "北京", "VC");
　dataset.addValue(5000, "上海", "VC");
　dataset.addValue(5500, "广州", "VC");
　return dataset;
}
%＞
＜/body＞
＜/html＞

　　生成图片如下：

　　＜六＞后记

　　1.这是本人发表的第一篇文章，如有不妥之处，请大家指正。

　　2.本人以程序员学历调查为例，实属对很多企业不接受低学历程序员的现象身有感触。本人认为，如果一个低学历的人真正的的想做程序员，他就会比其他人更加刻苦学习更多的知识。如果一个企业愿意用一个没有学历的程序员，他也会对这家企业心存感激，认真工作，不会轻易跳槽。

评论

2 楼 leo_soul 2010-09-30  

为啥都要用 saveChartAsXXX 来画图呢？这样会生成一个图片在服务器上，我找了很多例子，没人用writeChartAsXXX 在页面上输出图片。我需要做一个用writeChartAsPNG并且带热点的图，并且热点也不能再服务器上生成文件，最好也是流方式输出到客户端(浏览器)那边。

1 楼 zhengdon 2007-07-09  

请问如何把饼图各项的总和在生成的图中给显示出来呢？比如上面例子的程序员学历，各种学历加起来的总人数。