JFreeChart基于Java Web的报表组件的使用以及解决乱码

JFreeChart的简介在此就不赘述，主要讲解如何使用JFreeChart创建各种图表，这些图表包括：饼图、柱状图 ( 普通柱状图以及堆栈柱状图 )、线图、区域图、分布图、混合图、甘特图以及一些仪表盘等等。以及自定义图表热点事件等。。另外解决乱码问题。

完整源码下载：http://download.csdn.net/detail/jackphang/5265557

参考资料：http://www.ibm.com/developerworks/cn/java/l-jfreechart/

JFreeChart主页：http://www.jfree.org/jfreechart/index.html

JFreeChart下载页面：http://sourceforge.net/projects/jfreechart/

下载后的文件jfreechart-1.0.14.jar，目前是最新的，解压后，在lib目录中找到jfreechart-1.0.14.jar和jcommon-1.0.17.jar这两个jar包，将此复制到你的项目中。值得注意的是，如果JFreeChart不同版本的类结构是不一样的。

在此，笔者主要介绍几种图表，其他的图表可以触类旁通。

1.柱状图

 

如果不对中文做处理，则会有乱码的的情况，主要原因有

1：操作系统不支持JFreeChart框架中的字体，读者可以下载相应的字体库到系统中，或者使用笔者提供设置字体的类ChartFontUtil。
2：软件版本问题，jfreechart-1.0.10有人说没有问题，但jfreechart-1.0.11到14都有问题，我用的最新的jfreechart-1.0.14不做设置是有问题的。
究其原因，是它代码的内部设置的字体有问题.

3:读者可以修改JFreeChart源码中默认的字体、然后重新打包成Jar使用，以此可以一劳永逸，但是笔者没这么干过。

设置乱码工具类

 

package com.pyy.report;

import java.awt.Color;
import java.awt.Font;

import org.jfree.chart.JFreeChart;
import org.jfree.chart.axis.Axis;
import org.jfree.chart.plot.CategoryPlot;
import org.jfree.chart.plot.PiePlot3D;
import org.jfree.chart.plot.XYPlot;
import org.jfree.chart.title.TextTitle;

/**
 * @author jackphang
 * @date 2013-4-16
 * @description 设置JFreeChart字体，解决乱码问题
 */

public class ChartFontUtil {
	/**
	 * 配置柱状图的字体，以防止乱码
	 * 
	 * @param chart
	 *            JFreeChart 对象
	 */
	public static void setBarChartFont(JFreeChart chart) {
		// 配置字体
		CategoryPlot plot = chart.getCategoryPlot();// 图形的绘制结构对象
		// 标题
		setTitleFont(chart);
		// 底部
		setBottomFont(chart);
		// X轴
		setXFont(plot.getDomainAxis());
		// Y轴
		setYFont(plot.getRangeAxis());
	}

	/**
	 * 设置线图字体，防止乱码
	 * 
	 * @param chart
	 */
	public static void setXYLineCharFont(JFreeChart chart) {
		XYPlot plot = chart.getXYPlot();// 图形的绘制结构对象
		// 标题
		setTitleFont(chart);
		// 底部
		setBottomFont(chart);
		// X轴
		setXFont(plot.getDomainAxis());
		// Y轴
		setYFont(plot.getRangeAxis());
	}

	/**
	 * 设置饼图的字体，防止乱码
	 * 
	 * @param chart
	 */
	public static void setPieChartFont(JFreeChart chart) {
		PiePlot3D plot = (PiePlot3D) chart.getPlot();
		
		// 标题
		setTitleFont(chart);
		// 底部
		setBottomFont(chart);
		
		Font font=new Font("宋体",Font.PLAIN,12);
		plot.setLabelFont(font);

	}
	
	/**
	 * 设置区域的字体，防止乱码
	 * 
	 * @param chart
	 */
	public static void setAreaChartFont(JFreeChart chart) {
	 	CategoryPlot plot=chart.getCategoryPlot();
		// 标题
		setTitleFont(chart);
		// X轴
		setXFont(plot.getDomainAxis());
		// Y轴
		setYFont(plot.getRangeAxis());
	}
	
	/**
	 * 配置甘特图的字体，以防止乱码
	 * 
	 * @param chart
	 *            JFreeChart 对象
	 */
	public static void setGanTChartFont(JFreeChart chart) {
		// 配置字体
		CategoryPlot plot = chart.getCategoryPlot();// 图形的绘制结构对象
		// 标题
		setTitleFont(chart);
		// 底部
		setBottomFont(chart);
		// X轴
		setXFont(plot.getDomainAxis());
		// Y轴
		setYFont(plot.getRangeAxis());
	}

	/**
	 * 设置标题字体
	 * 
	 * @param chart
	 */
	private static void setTitleFont(JFreeChart chart) {
		Font titleFont = new Font("隶书", Font.BOLD, 25); // 图片标题
		// 图片标题
		chart.setTitle(new TextTitle(chart.getTitle().getText(), titleFont));
	}

	/**
	 * 设置底部字体
	 * 
	 * @param chart
	 */
	private static void setBottomFont(JFreeChart chart) {
		Font kfont = new Font("宋体", Font.PLAIN, 12);// 底部
		// 底部
		chart.getLegend().setItemFont(kfont);
	}

	/**
	 * 设置X轴字体
	 * 
	 * @param plot
	 */
	private static void setXFont(Axis domainAxis) {
		// X 轴
		Font xfont = new Font("宋体", Font.PLAIN, 12);// X轴
		domainAxis.setLabelFont(xfont);// 轴标题
		domainAxis.setTickLabelFont(xfont);// 轴数值
		domainAxis.setTickLabelPaint(Color.RED); // 字体颜色
	}

	/**
	 * 设置Y轴字体
	 * 
	 * @param plot
	 */
	private static void setYFont(Axis rangeAxis) {
		// Y 轴
		Font yfont = new Font("宋体", Font.PLAIN, 12);// Y轴
		rangeAxis.setLabelFont(yfont);
		rangeAxis.setLabelPaint(Color.BLUE); // 字体颜色
		rangeAxis.setTickLabelFont(yfont);
	}

}

生成柱状图的类

package com.pyy.report;

import java.io.FileOutputStream;
import java.io.IOException;

import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartUtilities;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.plot.PlotOrientation;
import org.jfree.data.category.CategoryDataset;
import org.jfree.data.category.DefaultCategoryDataset;

/**
 * 柱状图
 * 
 * @author jackphang
 */
public class BarChart {
	public static void main(String[] args) throws IOException {
		CategoryDataset dataset = getDataSet2();
		JFreeChart chart = ChartFactory.createBarChart3D("水果产量柱状图", // 图表标题
				"水果", // 目录轴的显示标签
				"产量", // 数值轴的显示标签
				dataset, // 数据集
				PlotOrientation.VERTICAL, // 图表方向：水平、垂直
				true, // 是否显示图例(对于简单的柱状图必须是 false)
				false, // 是否生成工具
				false // 是否生成 URL 链接
				);
		ChartFontUtil.setBarChartFont(chart);

		FileOutputStream fos_jpg = null;
		try {
			fos_jpg = new FileOutputStream("F:\\bar_chart.jpg");
			ChartUtilities.writeChartAsJPEG(fos_jpg, 1, chart, 400, 300, null);
		} finally {
			try {
				fos_jpg.close();
			} catch (Exception e) {
			}
		}

	}

	/**
	 * 获取一个演示用的简单数据集对象
	 * 
	 * @return
	 */
	private static CategoryDataset getDataSet() {
		DefaultCategoryDataset dataset = new DefaultCategoryDataset();
		dataset.addValue(100, "", "苹果");
		dataset.addValue(200, "", "梨子");
		dataset.addValue(300, "", "葡萄");
		dataset.addValue(400, "", "香蕉");
		dataset.addValue(500, "", "荔枝");
		return dataset;
	}

	/**
	 * 获取一个演示用的组合数据集对象
	 * 
	 * @return
	 */
	private static CategoryDataset getDataSet2() {
		DefaultCategoryDataset dataset = new DefaultCategoryDataset();
		dataset.addValue(100, "北京", "苹果");
		dataset.addValue(100, "上海", "苹果");
		dataset.addValue(100, "广州", "苹果");
		dataset.addValue(200, "北京", "梨子");
		dataset.addValue(200, "上海", "梨子");
		dataset.addValue(200, "广州", "梨子");
		dataset.addValue(300, "北京", "葡萄");
		dataset.addValue(300, "上海", "葡萄");
		dataset.addValue(300, "广州", "葡萄");
		dataset.addValue(400, "北京", "香蕉");
		dataset.addValue(400, "上海", "香蕉");
		dataset.addValue(400, "广州", "香蕉");
		dataset.addValue(500, "北京", "荔枝");
		dataset.addValue(500, "上海", "荔枝");
		dataset.addValue(500, "广州", "荔枝");
		return dataset;
	}
}

以上是生成一个简单的柱状图，在你的Web项目中读取生成的图片即可。下面笔者带大家一起编写一个在JSP页面显示并且可以点击的饼图报表。

先看web.xml的配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
	http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>
	<servlet>
		<servlet-name>chartServlet</servlet-name>
		<servlet-class>com.pyy.servlet.ChartServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>chartServlet</servlet-name>
		<url-pattern>/chartServlet</url-pattern>
	</servlet-mapping>

	<!-- 该Servlet用于页面读取图片的虚拟路径 -->
	<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>/servlet/DisplayChart</url-pattern>
		<!--注意这个url-patten与ChartServlet中的访问是一致的 -->
	</servlet-mapping>
</web-app>

接下来是编写生成图表的Servlet。

 

package com.pyy.servlet;

import java.awt.Rectangle;
import java.awt.Shape;
import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartRenderingInfo;
import org.jfree.chart.ChartUtilities;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.entity.ChartEntity;
import org.jfree.chart.entity.StandardEntityCollection;
import org.jfree.chart.imagemap.ImageMapUtilities;
import org.jfree.chart.imagemap.StandardToolTipTagFragmentGenerator;
import org.jfree.chart.imagemap.StandardURLTagFragmentGenerator;
import org.jfree.chart.imagemap.ToolTipTagFragmentGenerator;
import org.jfree.chart.servlet.ServletUtilities;
import org.jfree.data.general.DefaultPieDataset;

import com.pyy.report.ChartFontUtil;
import com.pyy.report.ChartMapUtil;

/**
 * @author jackphang
 * @date 2013-4-16
 * @description
 */
public class ChartServlet extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = -2356456574687594944L;

	@Override
	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html; charset=UTF-8");
		Shape shape = new Rectangle(20, 10);
		ChartEntity entity = new ChartEntity(shape);
		StandardEntityCollection coll = new StandardEntityCollection();
		coll.add(entity);
		// 在鼠标移动到图片时显示提示信息是用Map实现的，这些Map是用该类生成的。
		ChartRenderingInfo info = new ChartRenderingInfo(coll);
		PrintWriter pw = response.getWriter();// 输出MAP信息
		// 生成提示信息的类
		ToolTipTagFragmentGenerator toolTip = new StandardToolTipTagFragmentGenerator();
		JFreeChart chart = createChart(response);
		/**
		 * 生成图片的文件名
		 * 注意，这个savesaveChartAsPNG方法的第四个参数，info，如果没有这个参数的话，是不能将图片的map存入的，
		 * 也就是说生成的图片没有热点。。
		 * */
		String fileName = ServletUtilities.saveChartAsPNG(chart, 500, 500,
				info, request.getSession());
		/*
		 * 这里的参数chartMap，意思是：把map信息写入request中key值为chartMap的map中。
		 * 取出的时候，在页面上用getAttribute("chartMap")
		 */
		ChartUtilities.writeImageMap(pw, "chartMap", info, false);
		StandardURLTagFragmentGenerator url = new StandardURLTagFragmentGenerator();
		url.generateURLFragment("index.do");
		// 获得"map"
		String chartMap = ImageMapUtilities.getImageMap("chartMap", info,
				toolTip, url);
		System.out.println(chartMap);
		chartMap = ChartMapUtil.getChartMap(chartMap);
		System.out.println(chartMap);
		// 存储map信息,页面读取该Map
		request.setAttribute("myChartMap", chartMap);

		request.setAttribute("fileName", fileName);
		// response.setBufferSize(1024*100);
		// pw.flush();
		// 获取图片的路径
		String graphURL = request.getContextPath()
				+ "/servlet/DisplayChart?filename=" + fileName; // 将路径放到request对象中
		// 注意这里的"/servlet/DisplayChart?filename="
		// 是jfreechart的虚拟的存储路径。一定要与在web.xml中配置的servlet一致
		request.setAttribute("graphURL", graphURL);
		// 页面转发到index.jsp
		request.getRequestDispatcher("index.jsp").forward(request, response);
	}

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		this.doPost(req, resp);
	}

	/**
	 * 创建图表
	 * 
	 * @param resp
	 * @return
	 * @throws IOException
	 */
	private JFreeChart createChart(HttpServletResponse resp) throws IOException {
		DefaultPieDataset dataSet = getDataSet();
		JFreeChart chart = ChartFactory.createPieChart3D("水果产量饼图", dataSet,
				true, true, true);
		ChartFontUtil.setPieChartFont(chart);
		return chart;
	}

	private DefaultPieDataset getDataSet() {
		DefaultPieDataset dataSet = new DefaultPieDataset();
		dataSet.setValue("荔枝", 100);
		dataSet.setValue("西瓜", 150);
		dataSet.setValue("苹果", 300);
		dataSet.setValue("荔枝", 200);
		dataSet.setValue("香蕉", 400);
		dataSet.setValue("蜜桃", 200);
		dataSet.setValue("西瓜", 100);
		dataSet.setValue("香蕉", 100);
		dataSet.setValue("苹果", 100);
		return dataSet;
	}

}

ChartServlet类所依赖的工具类

package com.pyy.report;

import java.io.StringReader;
import java.util.List;

import org.jdom.Attribute;
import org.jdom.Document;
import org.jdom.Element;
import org.jdom.input.SAXBuilder;
import org.xml.sax.InputSource;

/**
 * @author jackphang
 * @date 2013-4-16
 * @description
 */
public class ChartMapUtil {

	/**
	 * 获得自定义ChartMap数据
	 * 
	 * @param chartMap
	 * @return
	 */
	@SuppressWarnings("unchecked")
	public static String getChartMap(String chartMap) {
		StringBuilder builder = new StringBuilder();
		StringReader reader = new StringReader(chartMap);
		InputSource source = new InputSource(reader);
		SAXBuilder build = new SAXBuilder();
		try {
			Document doc = build.build(source);
			Element element = doc.getRootElement();
			List<Element> list = element.getChildren();
			builder.append("<map id=\"myChartMap\" name=\"MyChartMap\">");
			int size = list.size();
			for (int j = 0; j < size; j++) {
				builder.append(" <area shape=\"poly\"");
				Element e = list.get(j);
				Attribute coordsAttr = e.getAttribute("coords");
				builder.append("coords=\"").append(coordsAttr.getValue())
						.append("\" ");
				Attribute titleAttr = e.getAttribute("title");
				String titleValue = titleAttr.getValue();
				builder.append("title=\"").append(titleValue.split("\\:")[0])
						.append("\" ");
				Attribute hrefAttr = e.getAttribute("href");
				String hrefValue = hrefAttr.getValue();
				builder.append("href=\"").append("myUrl.do?")
						.append(hrefValue.split("\\?")[1]).append("\" ");
				builder.append("/>");
			}
			builder.append("</map>");
		} catch (Exception e) {
			e.printStackTrace();
		}
		return builder.toString();
	}

}

index.jsp页面

 

${myChartMap } 
 <!-- usemap中的myChartMap是指${myChartMap}生成后的<map id="myChartMap" name="MyChartMap"> 的name值 -->
 <img src="${graphURL}" border="0" ismap="ismap" usemap="#myChartMap"/><br><br>

 

${myChartMap}生成的代码：

 
<map id="myChartMap" name="MyChartMap">
 <area shape="poly"coords="131,267,128,250,128,232,128,214,131,197,134,180,140,164,146,149,154,134,163,121,174,109,185,99,197,91,209,84,222,79,236,76,250,75,250,232,250,232" title="蜜桃" href="myUrl.do?category=%E8%9C%9C%E6%A1%83&pieIndex=0" />
 <area shape="poly"coords="197,374,185,365,173,355,163,343,154,330,146,316,140,301,135,284,131,267,250,232,250,232" title="香蕉" href="myUrl.do?category=%E9%A6%99%E8%95%89&pieIndex=0" />
 <area shape="poly"coords="302,374,290,381,276,386,263,388,250,389,236,388,223,386,209,381,197,374,250,232,250,232" title="苹果" href="myUrl.do?category=%E8%8B%B9%E6%9E%9C&pieIndex=0" />
 <area shape="poly"coords="368,267,364,284,359,301,353,316,345,330,336,343,326,355,314,365,302,374,250,232,250,232" title="西瓜" href="myUrl.do?category=%E8%A5%BF%E7%93%9C&pieIndex=0" />
 <area shape="poly"coords="250,75,263,76,277,79,290,84,302,91,314,99,325,109,336,121,345,134,353,149,359,164,365,180,368,197,371,214,371,232,371,250,368,267,250,232,250,232" title="荔枝" href="myUrl.do?category=%E8%8D%94%E6%9E%9D&pieIndex=0" />
 </map> 

 

 

图表效果

 

每个区域都会显示热点、而且可以点击url跳转到指定的Servlet。具体实现、读者可以根据ChartMapUtil类自行修改，值得注意的是，生成的ChartMap数据必须符合一定的规范。另外，如果读者是使用OverLIBToolTipTagFragmentGenerator该类创建的热点，则需要加入overlib.js ,查看OverLIBToolTipTagFragmentGenerator源码：return " onMouseOver=\"return overlib('" + ImageMapUtilities.javascriptEscape(toolTipText) + "');\" onMouseOut=\"return nd();\"";  它是使用了外置的js，overlib.js。百度下载overlib.js放入你项目即可。

百度搜索下载即可。

完整源码下载：http://download.csdn.net/detail/jackphang/5265557