<一>前言: 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>nacl_zhuang@hotmail.com</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>nacl_zhuang@hotmail.com</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>? |
生成圖片如下:?
|