下载文档原格式
WEB图表开发系列一：使用JFreeChart生成热点图表＜一＞前言：JFreeChart是开放源代码站点上的一个JAVA项目。
它的功能十分强大，能创建饼图、柱状图(普通柱状图以及堆栈柱状图)、线图、区域图、分布图、混合图、甘特图以及一些仪表盘等等，并可生成PNG或JPG图片格式文件。
本人在学习过程中发现，网上很多文章都是讲一些JFreeChart的基本应用，而对JFreeChart生成热点图表这样常用的功能虽有所提及却没有一个完整的例子，所以我就写一个简单示例供大家参考，希望对大家的学习有所帮助。
＜二＞示例说明：假设有一个关于程序员北京，上海，广洲三地程序员学历，开发语言，薪金情况的调查。
首先要以饼图显示程序员学历的分布情况(index.jsp)。
点击饼图的每一部分会以柱状图显示该层次程序员所用开发语言和薪金的情况(barview.jsp)。
重点演示怎样在饼图上添加链接。
＜三＞准备工作：1.下载最新版本的JFreeChart,当前为jfreechart-1.0.0-rc1下载地址：/jfreechart/index.html2.解压文件，将jfreechart-1.0.0-rc1/lib下的jcommon-1.0.0-rc1.jar，jfreechart-1.0.0-rc1.jar复制到WEB应用的lib目录下。
3.在web.xml文件中增加以下内容：1.<servlet>2.<servlet-name>DisplayChart</servlet-name>3.<servlet-class>org.jfree.chart.servlet.DisplayChart</servlet-class>4.</servlet>5.<servlet-mapping>6.<servlet-name>DisplayChart</servlet-name>7.<url-pattern>/servletDisplayChart</url-pattern>8.</servlet-mapping>＜四＞饼图页面代码（index.jsp）1.<%@ page contentType="text/html;charset=GBK"%>2.<%@ page import="org.jfree.data.general.DefaultPieDataset"%>3.<%@ page import="org.jfree.chart.*"%>4.<%@ page import="org.jfree.chart.plot.*"%>5.<%@ page import="org.jfree.chart.servlet.ServletUtilities"%>6.<%@ page import="bels.StandardPieItemLabelGenerator"%>7.<%@ page import="org.jfree.chart.urls.StandardPieURLGenerator"%>8.<%@ page import="org.jfree.chart.entity.StandardEntityCollection"%>9.<%@ page import="java.io.*"%>10.<HTML>11.<HEAD>12.<META http-equiv=Content-Type content="text/html; charset=GBK">13.<TITLE>nacl_zhuang@</TITLE>14.</HEAD>15.<BODY>16.<%17.18.DefaultPieDataset data = new DefaultPieDataset();19.data.setValue("高中以下",370);20.data.setValue("高中",1530);21.data.setValue("大专",5700);22.data.setValue("本科",8280);23.data.setValue("硕士",4420);24.data.setValue("博士",80);25.26.PiePlot3D plot = new PiePlot3D(data);//3D饼图27.plot.setURLGenerator(new StandardPieURLGenerator("barview.jsp"));//设定链接28.JFreeChart chart = new JFreeChart("",JFreeChart.DEFAULT_TITLE_FONT, plot, true);29.chart.setBackgroundPaint(java.awt.Color.white);//可选，设置图片背景色30.chart.setTitle("程序员学历情况调查表");//可选，设置图片标题31.plot.setToolTipGenerator(new StandardPieItemLabelGenerator());32.StandardEntityCollection sec = new StandardEntityCollection();33.ChartRenderingInfo info = new ChartRenderingInfo(sec);34.PrintWriter w = new PrintWriter(out);//输出MAP信息35.//500是图片长度，300是图片高度36.String filename = ServletUtilities.saveChartAsPNG(chart, 500, 300, info, session);37.ChartUtilities.writeImageMap(w, "map0", info, false);38.39.String graphURL = request.getContextPath() + "/servlet/DisplayChart?filename="+ filename;40.41.%>42.43.<P ALIGN="CENTER">44.<img src="<%= graphURL %>"width=500 height=300 border=0usemap="#map0">45.</P>46.</BODY>47.</HTML>生成的图片如下在浏览器中点右键－＞查看源文件会发现有以下一段HTML代码：1.<map id="map0"name="map0">2.<area shape="poly"coords="247,61,250,61,250,123,250,123"title="博士= 80"alt=""href="barview.jsp?category=博士&pieIndex=0"/>3.<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"/>4.<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,1 57,151,151,142,147,132,146,122,148,112,250,123,250,123"title="本科= 8,280"alt=""href="barview.jsp?category=本科&pieIndex=0"/>5.<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"/>6.<area shape="poly"coords="261,62,285,65,307,72,250,123,250,123"title="高中= 1,530"alt=""href="barview.jsp?category=高中&pieIndex=0"/>7.<area shape="poly"coords="250,61,261,62,250,123,250,123"title="高中以下= 370"alt=""href="barview.jsp?category=高中以下&pieIndex=0"/>8.</map>这就是MAP信息，我们在IMG标签中加入usemap="#map0"就可以为饼图的每一部分加入链接。
1.1通过代码实例跟我学JFreeChart 图表组件——在J2EE Web应用系统中采用MVC架构实现方式应用JFreeChart的实例1、添加一个请求的页面 requestImageFormMVC.jsp（1）添加requestImageFormMVC.jsp页面文件（2）requestImageFormMVC.jsp页面的代码示例<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>请求的页面</title></head><body><form action="/JFreeChart/showSomeImage" method="post">图像的宽度：<input type="text" name="imagesWidth" /> <br>图像的高度：<input type="text" name="imagesHeight" /> <br>图像的标题：<input type="text" name="imagesTitle" /> <br><input type="submit" value="提交" /></form></body></html>2、响应结果的页面showSomeImageMVC.jsp（1）添加showSomeImageMVC.jsp页面文件（2）showSomeImageMVC.jsp页面的代码示例<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>My JSP 'showSomeImageMVC.jsp' starting page</title></head><body><table border="1" align="center" bordercolor="#6699FF" class="wd_red"><tr><td>这是Pie图的数据</td><td rowspan="3" align="center"><img src="<%= request.getAttribute("targetGraphURL") %>" border=0 usemap="#<%= request.getAttribute("graphFileName") %>"></td></tr><tr><td>这是Pie图的其它数据</td></tr><tr><td>这是Pie图的其它数据</td></tr></table></body></html>3、设计对应的Servlet组件程序（1）程序类名称为 ShowSomeImage，包名称为com.px1987.jfreechart.servlet（2）设置URL-Pattern为/showSomeImage（3）编程该Servlet组件中的功能实现代码package com.px1987.jfreechart.servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.RequestDispatcher;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.px1987.jfreechart.model.WebPieChartBean;public class ShowSomeImage extends HttpServlet {public ShowSomeImage() {super();}public void destroy() {super.destroy();}public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("gb2312");String imagesWidth=request.getParameter("imagesWidth");String imagesHeight=request.getParameter("imagesHeight");String imagesTitle=request.getParameter("imagesTitle");WebPieChartBean pieChartBeanID=new WebPieChartBean();pieChartBeanID.setImagesWidth(imagesWidth);pieChartBeanID.setImagesHeight(imagesHeight);pieChartBeanID.setImagesTitle(imagesTitle);pieChartBeanID.setRequest(request);pieChartBeanID.createImageMVC();String graphFileName=pieChartBeanID.getGraphFileName();String targetGraphURL=pieChartBeanID.getTargetGraphURL();request.setAttribute("graphFileName", graphFileName);request.setAttribute("targetGraphURL", targetGraphURL);RequestDispatcheroneRequestDispatcher=request.getRequestDispatcher("/showSomeImageMVC.jsp");oneRequestDispatcher.forward(request, response);}public void init() throws ServletException {}}4、测试本示例目前的应用效果（1）在浏览器中输入测试页面的URL地址：http://127.0.0.1:8080/JFreeChart/requestImageFormMVC.jsp（2）在表单中输入图表相关的工作参数，如何再提交表单，将出现下面的执行结果。
利用JFreeChart生成折线图通过JFreeChart插件，既可以生成普通效果的折线图，也可以生成3D效果的折线图。
如果想生成普通效果的折线图，需要通过工厂类ChartFactory的createLineChart()方法获得JFreeChart类的实例；如果想生成3D效果的折线图，需要通过工厂类ChartFactory的createLineChart3D()方法获得JFreeChart类的实例。
这两个方法的入口参数是完全相同的，各个入口参数的类型及功能请参见14.2.1节的表14.2。
可以分别通过绘图区对象CategoryPlot的getDomainAxis()方法和getRangeAxis()方法，获得横轴对象和纵轴对象，通过得到的轴对象可以设置绘制坐标轴的相关属性，常用方法及实现功能如表14.4所示。
表14.4 设置坐标轴绘制属性的部分通用方法纵轴对象还提供了设置坐标最大值的方法setUpperBound(double max)，在默认情况下将最大值控制在能够正常绘制统计图的范围内。
通过java.awt.BasicStroke类可以绘制出各种各样的线段，大体分为实线段和虚线段，可控的绘制条件包括线条的宽度、线段端点的风格、折线段的折点风格、虚线段的绘制风格和虚线段的绘制偏移量，BasicStroke类提供的所有构造方法如表14.5所示。
表14.5 BasicStroke类提供的所有构造方法线段端点的修饰风格有3种，分别由3个常量表示，具体信息如表14.6所示。
表14.6 线段端点修饰风格简介线段折点的修饰风格同样有3种，也由3个常量表示，具体信息如表14.7所示。
表14.7 线段折点修饰风格简介入口参数dash 用来定义虚线，为float 型数组，当dash 数组由偶数个元素组成时，索引值为偶数的元素值代表虚线段的长度，索引值为奇数的元素值代表两个虚线段之间的空白部分的长度，需要注意的是，数组的索引值是从0开始的；当数组中只有一个元素时，例如dash={6}，等同于dash={6,6}。
Jfreechart开发手记（一）完整的柱状图-含数据下钻的实现
方法
Jfreechart开发手记（一）
完整的柱状图
（含数据下钻的实现）
作者：Steel.Ma
Mail：****************
****************
MSN：*************************
Blog： /steelma
/iamsteelma
1概述
本笔记阐述的是如何使用开源的Jfreechart框架，制作一个完整的柱状图并实现BI软件中常见的“数据下钻”功能。
先来看看效果图：
以上就是本笔记的范例代码所要实现的，其中，点击每根柱子，还能自动链接到另外一个页面中，并该柱所带的参数传递过去。
以下开始进行环境配置：
2环境准备与基本配置
环境选型：
Tomcat 6.0.18
Jfreechart 1.0.13
MyEclipse
Tomcat、MyEclipse可以忽略，按照默认配置即可，这里介绍下如何配置
Jfreechart的包。
打开MyEclipse，在项目名称上右击，然后选择Build Path->Configure Build Path，将Jfreechart下的lib文件夹中的jcommon-1.0.16.jar与jfreechart-1.0.13.jar引入，注意！其他文件不要引入！切切！
引入后，效果当如下：
最后打开web.xml文件，加入如下这2段xml配制代码：This is the description of my J2EE
component。
1.1通过代码实例跟我学Java 图表技术——开源JFreeChart Web图表组件在J2EE 项目中的应用实例1.1.1Web图表技术1、Web图表技术概述在开发应用程序时，经常会遇到必须提供交互式图表的情况。
客户要求应用程序能够用饼图、柱形图或XY散点图的形式直观地描述数据。
（1）B/S与C/S方式下的图表技术的不同WWW的发展使得基于因特网的应用程序不再局限于静态或者简单的动态内容提供。
传统的一些以软件包形式发布的应用程序，例如报表系统等，都被逐渐搬到了因特网上。
但是这两者之间有着天壤之别，虽然对于数据获取、业务处理等方面基本类似，但是最大的差别在于用户界面---B/S下的UI不及C/S 下的丰富。
（2）如何实现Web方式下的图表为了能在web浏览器上显示所需的用户界面，需要使用HTML以及图片的方式来展现数据。
1)传统的一些利用操作系统本身的控件来开发的用户界面就无法适应琳琅满目的客户端需求。
2)为了可以在web浏览器上查看到图表，一般有下面的几种做法。
2、图表技术的基础Java Graphics2D技术。
3、实现Web图表的各种技术可以使用Java Applet或者J2EE JSP/Servlet等程序方式。
4、实现Web图表的各种技术直接在Web服务器端生成好图表图片文件后再发送给浏览器。
5、实现Web图表的各种技术----使用JAVA的图表引擎JFreeChart（1）实现的原理JFreeChart主要用来开发各种各样的图表，并且是目前比较好的Java图表解决方案。
可以产生基于Web的图表。
（2）实现的示例：http://127.0.0.1:8080/NetBook/WebChar/JFreeChartSample.jsp注意：在上面的三种方式中，其中以第三种方式的功能比较强大，但也需要进行复杂的编程实现。
1.1.2开源的图表组件JFreeChart1、开源的图表组件JFreeChart（1）JFreeChart公司的各个产品JFreeChart是JFreeChart公司在开源网站上的一个项目，该公司的主要产品有如下的几种：1)JFreeReport：报表解决工具2)JFreeChart：Java图形解决方案（Application/Applet/Servlet/Jsp）3)JCommon：JFreeReport和JFreeChart的公共类库4)JFreeDesigner：JFreeReport的报表设计工具（2）JFreeChart概述2、JFreeChart所能够产生的主要图形类型JFreeChart主要用来开发各种各样的图表，并且是目前比较好的Java图表解决方案。
各类统计程序实现杨方 531115121 矢量图的生成矢量统计图，即是以矢量图形格式生成、存在和输出的统计图。
这种统计图图形要素丰富、交互编辑简单、存储格式多样，打印输出方便，是GIS应用系统最优先选择的统计图。
最常用的三类矢量统计图是直方图、曲线图、饼图。
矢量统计图的生成，首先要将数据组织为一定的格式，然后进行图形参数的计算和设置，再生成图形，最后进行浏览显示或者保存输出。
当然，如果对生成的图形不满意，可以进行参数修改，然后重新生成，最后再显示或保存。
1.1 数据组织原始数据可以整理为二维表格的形式，通过文件（*.txt，*.xls，*.doc）导入，也可以将数据整理为二维数组的形式输入。
统计图只支持为数值型的数据，包括整型、长整型、浮点型和双精度型等4种数据类型。
1.2 设置参数图形参数可以由用户外部输入，也可以根据数据生成默认参数，分为基本参数、坐标参数、图例参数和数据参数等。
（1）基本参数包括图形类型，图形名称，图形范围，点、线、区参数等。
（2）坐标轴参数包括是否绘制轴线、刻度线、标注、网格线的标志，刻度数，颜色，名称，比例尺，以及是否绘制包围盒或箭头的标志。
（3）图例参数包括是否绘制图例的标志和图例显示位置标志。
（4）数据参数包括数据类型，是否绘制数据表的标志，图形单元的宽度或间隔、图形单元的颜色，系列和类别显示标志等。
1.3 图形生成生成图形的基本步骤如下：（1）确认存在点、线、面工作区。
生成的图形要暂时存入工作区中，然后才能进行显示或保存。
点线面工作区可以由外部输入，也可以在软件中生成。
（2）确认各项图形参数有效。
必须保证每项图形参数都有效，否则软件将出错。
对于没有设置有效值的参数，要重新设置默认参数。
（3）依次生成图形的各个要素：生成坐标轴、生成图形主体、生成数据表、生成图例和生成图形。
在生成统计图的过程中，要随时计算图形的当前范围，以控制后续元素的位置。
1.4 图形显示统计图生成后，保存在MAPGIS的点线面工作区中，可以调用MAPGIS的图形显示视图进行显示。
使用JfreeChart开发图表经验总结（含源码）使用JfreeChart开发图表经验总结（含源码）Keith He 2005年10月27日最近，公司一项目要出很多的图表。
由于项目是B/S架构的，所以生成的图表也要考虑能在浏览器上动态显示。
生成基于浏览器的图表方式比较多。
据我所知道的，常用的有三种：1、VML方式实现。
这种方式是通过产生客户端的代码，由客户端根据代码生成相应的图表。
但这种方式产生的图表有很多的局限性，如受限于浏览器，有些浏览器可能并不支持VML。
另外，没有封装完整的图表开发包。
2、通过applet来产生图表。
这种方式也对客户端要求比较高，必须要有JRE，而且通过applet生成的图表在加载过程中会有个Java的Log动画。
用户看了可能会感觉不太舒服。
3、通过服务端直接生成图表的图片。
这种方式对客户端几乎没有什么要求，缺点是加重了服务端的负担，对服务端要求就相对高了点。
经过比较，根据项目自身特点，我们打算采用第三种方式来开发图表。
为了缩短开发周期、节约成本，我们选用了开源的JFreeChart(/jfreechart/)。
jfreechart是一个免费创建图表的java工具，目前最新版本是JFreeChart-1.0.0-rc1。
它可以生成各式各样的图表。
这些图表包括饼图、柱状图、线形图、区域图、甘特图等等，基本可以满足各种项目的要求。
但在开发过程中我也发现了JFreeChart的一些不足，或者说有些称得上是BUG。
总体说来，JFreeChart还是个优秀的开源项目。
关于JFreeChart生成图表的文章比较多了，我主要谈谈使用JFreeChart的一些比较棘手问题以及解决方法。
同时也会将问题所用到的源码（JFreeChart-1.0.0-rc1+Struts1.2.4）从项目中抽象出来一起提供给大家。
一、图片上热点链接中文乱码的解决方法这个问题是在我查阅关于JFreeChart相关资料时出现频率最高的一个问题。
其实这个乱码问题不能怪罪于JFreeChart。
有人甚至就因此认为JFreeChart对中文支持不太完善，JFreeChart可要叫了：我是冤枉的！我们来找出问题产生的原因，这个问题也就不难解决了。
首先查看一下出现问题页面的Html源文件，你会发现在源文件的开头多出了一段map代码，代码类似于这样：<map id="chart-30928.png"name="chart-30928.png"><area shape="poly" coords="179,163,176,154,174,145"title="洗衣机=315(29.86%)" alt=""/>…………</map><html><head>…………这部分map代码其实是JFreeChart产生的，是用来产生图片上的热点链接，这也是问题产生的根源所在。
你的Jsp页面通过<%@ page contentType="text/html;charset=UTF-8" %>或者<%@ pagecontentType="text/html; charset=GBK" %>来设置contentType这无可厚非，但map并不是由这个jsp页面产生的。
它是JFreeChart通过PrintWriter产生的。
查看一下你生成图片的Chart源码，其中有ChartUtilities.writeImageMap(pw, filename, info, false)这样的语句。
这是用来向页面写入map代码的。
默认情况下，map代码会以服务器默认编码(ISO-8859-1)输出。
这就和你的Jsp编码不一致，从而产生乱码。
原因找到了，问题也就不难解决的。
设置PrintWriter的contentType与Jsp的contentType保存一致就可以了。
代码如下（笔者的Web应用是基于Struts框架的）：//PieMothAciton.java public ActionForwardexecute(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response)throws Exception {//设置输出编码格式response.setContentType("text/html;charset=UTF-8");PrintWriter out = response.getWriter();…………String filename = chart.generatePieChart3D("月统计比例图",session, out);String graphURL = request.getContextPath()+ "/servlet/DisplayChart?filename=" + filename;request.setAttribute("filename",filename);request.setAttribute("graphURL",graphURL);return mapping.findForward(SUCCESS);}重新部署你的Web应用，中文乱码文件就可以解决了。
二、饼图显示百分比在饼图中JFreeChart默认只显示选项和数值，没有显示各项所占比例。
由于手头没有1.0版的JFreeChart Developer Guide（这可是要钱的，后来想想即使有，也未必能找到关于百分比这方面的说明），再加上DEMO中的饼图都没有显示百分比，无法参考。
后来在网上找到了一个老版本的例子，其中能显示百分比。
它是通过在PiePlot中设置的：PiePlot pie;pie.setPercentFormatString("#,###0.0#%");但1.0版本中根本就找不到setPercentFormatString这方法，JFreeChart各版本之间改动比较大，很难兼容。
还好它是开源的，把它的源码都搜索了一遍，认真读了一些源码，终于理出了头绪。
原来在1.0.0-rc1版中显示百分比已经调整到StandardPieItemLabelGenerator构造函数中了，StandardPieItemLabelGenerator有三个构造函数。
StandardPieItemLabelGenerator()不显示各项所占比例。
另外两个可以显示比例。
代码如下：plot.setLabelGenerator(new StandardPieItemLabelGenerator(StandardPieItemLabelG enerator.DEFAULT_TOOLTIP_FORMAT));//或者采用下面自定义样式显示，{0}表示选项，{1}表示数值，{2}表示所占比例plot.setLegendLabelGenerator(new StandardPieItemLabelGenerator("{0}: ({1}M, {2})"));效果如下图：默认显示百分比是取整的，如果要让百分比保留二位小数，可以用第三个构造函数：plot.setLabelGenerator(new StandardPieItemLabelGenerator(“{0}={1}({2})R 21;,NumberFormat.getNumberInstance(),new DecimalFormat("0.00%")));效果如下图：三、混合图表（不同类型的图混合显示）我们经常用的是柱状图、曲线图、和饼图，这三类型图基本能满足大部分项目的需求。
但有些项目比较特殊，可能需要在一张图上同时显示不同类型的图。
这在JFreeChart中可以轻松实现。
例如我们要做个流量监控的系统，该系统一天中在不同的时间段有不同的阀值（最大值），该阀值表示成阶梯线。
而实际流量就是个曲线了。
当流量在某个时段内超过阀值时就触发相应的事件（如限流）。
要表示阀值和流量的对比关系就需要两种类型的图片在同一张图表上表示，如下图：首先像创建普通图表一样来创建图片，笔者先创建了一个XYStep Chart。
然后创建第二图表的Renderer，再分别将第二图表的Dataset、Renderer添加进第一图表的plot。
实例代码如下：//MultipleChart.javaJFreeChart jfreechart = ChartFactory.createXYStepAreaChart("监控设置","时刻","流量",xydataset,PlotOrientation.VERTICAL,true,true,false);XYPlot xyplot =jfreechart.getXYPlot();…………//设置第二图表的RendererStandardXYItemRenderer standardxyitemrenderer = new StandardXYItemRenderer();standardxyitemrenderer.setToolTipGenerator(new StandardXYToolTipGenerator("{0}({1}) = {2}",new SimpleDateFormat("HH:mm"),new DecimalFormat("#,##0")));//将第二图表的Dataset、Renderer添加进xyplotxyplot.setDataset(1, lineDataset);xyplot.setRenderer(1,standardxyitemrenderer); 这样就创建了曲线和阶梯的混合图表。
