top
Loading...

使用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＞[email protected]＜/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＞[email protected]＜/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.本人以程序員學歷調查為例，實屬對很多企業不接受低學歷程序員的現象身有感觸。本人認為，如果一個低學歷的人真正的的想做程序員，他就會比其他人更加刻苦學習更多的知識。如果一個企業愿意用一個沒有學歷的程序員，他也會對這家企業心存感激，認真工作，不會輕易跳槽。
作者：http://www.zhujiangroad.com
來源：http://www.zhujiangroad.com
北斗有巢氏 有巢氏北斗