JFreeChart组件在基于JSP的Web统计图表中的应用与实现

JFreeChart组件在基于JSP的Web统计图表中的应用与实现

 

 

摘  要：本文以实际项目中问题的需求，在分析了JFreeChart组件结构的基础上，以柱状图为例，详细介绍了其在JSP中开发基于Web的统计图表的方法。

关键词：JFreeChart   Web图表    JSP

1  概述

创建一个可以在Web浏览器上查看的图表一般有两种做法：第一种是使用Applet利用Java本身对图形的支持来显示一个图表；第二种是直接在Web服务器端生成好图表图片文件后发送给浏览器。第一种方式显然对于客户端要求太高，这种方式比较适合局域网的应用，而对于因特网的环境就显得不太适合了。本文介绍的是一个基于Java的图表引擎JFreeChart，他可用在服务器端产生图表。

JFreeChart是开放源代码站点SourceForge.net上的一个Java项目，它主要用来开发生成各种各样的图表，这些图表包括：饼图、柱状图(普通柱状图以及堆栈柱状图)、线图、区域图、分布图、混合图、甘特图以及一些仪表盘等等。本文主要以柱状图为例介绍其使用方法，基于此可以去开发其他样式的图表。

2  环境和资源

在之前必须先准备好开发环境，因为是基于Web浏览器的图表展现，因此需要一个Servlet引擎或者是J2EE应用服务器。本文的JSP环境是Tomcat 5.0+jdk1.5.0，具体配置不在此详述。

JFreeChart可以到http://www.jfree.org/jfreechart/站点下载，当前最新版本是1.0.0，本文以0.9.11版本进行调试，其核心对象类如表1所示。

表1  JFreeChart中核心的对象类

    类名

类的作用以及简单描述

JFreeChart

图表对象，任何类型的图表的最终表现形式都是在该对象进行一些属性的定制。JFreeChart引擎本身提供了一个工厂类用于创建不同类型的图表对象

XXXXXDataset

数据集对象，用于提供显示图表所用的数据。根据不同类型的图表对应着很多类型的数据集对象类

XXXXXPlot

图表区域对象，基本上这个对象决定着什么样式的图表，创建该对象的时候需要Axis、Renderer以及数据集对象的支持

XXXXXAxis

用于处理图表的两个轴：纵轴和横轴

XXXXXRenderer

负责如何显示一个图表对象

XXXXXURLGenerator

用于生成Web图表中每个项目的鼠标点击链接

XXXXXToolTipGenerator

用于生成图象的帮助提示，不同类型图表对应不同类型的工具提示类

解压缩文件jfreechart-0.9.11，jfreechart-0.9.11.jar和 lib/jcommon-0.8.6.jar，lib/gnujaxp.jar，是开发运行需要的文件，把这三个文件放置到应用的lib目录下。然后在web.xml文件中配置以下内容：

<Servlet>

    <Servlet-name>Display Chart</servlet-name>

    <Servlet-class>org.jfree.chart.servlet.DisplayChart</servlet-class>

</servlet>

安装配置完成，就可以编写程序来生成所需统计图。

3  使用JFreeChart生成柱状图表

首先看一个最简单的例子，图片中的各类属性都采用默认值。

<%@ Page content Type="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.DefaultCategoryDataset"%>

<%

DefaultCategoryDataset dataset = new DefaultCategoryDataset();

dataset.addValue(32, "大观圆", "已售");

dataset.addValue(18, "大观圆", "待售");

dataset.addValue(18, "大观圆", "预订");

dataset.addValue(28, "大观圆", "认购");

dataset.addValue(8, "大观圆", "预留");

JFreeChart chart = ChartFactory.createBarChart3D("房屋销量统计图","房屋状态",

"销量",dataset, PlotOrientation.VERTICAL, False,false,false);

String filename = ServletUtilities.saveChartAsPNG(chart, 300, 260, null, session);

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

%>

<Imgsrc="<%=graphURL%>"width=500 height=300 border=0 use map="#<%=filename%>">

图2  简单柱状图                                 图3 组合数据集图

 

  此JSP程序的运行结果如图2所示。

上面的程序简单，但生成的柱状图也很简单。更多的时候，我们可能需要不同的效果。 org.jfree.chart.ChartFactory 这个工厂类有 createBarChart, createStackedBarChart, createBarChart3D, createStackedBarChart3D 这几个工厂方法用于创建不同类型的柱状图。关于这四个方法的 JFreeChart 的 Java Doc API 文档有详细说明，比较重要的是 PlotOrientation.VERTICAL 让平行柱垂直显示，而 PlotOrientation.HORIZONTAL 则让平行柱水平显示。

几个对柱状图影响较大的几个类，它们分别是：

org.jfree.chart.axis.CategoryAxis

org.jfree.chart.axis.ValueAxis

org.jfree.chart.renderer.BarRenderer

org.jfree.chart.renderer.BarRenderer3D

我们通过程序看其效果。

<%@ Page import="java.awt.Color,

                Java.awt.Font,

                Org.jfree.chart”%>

<%

Double [][] data=new double [][]{{34, 16, 23, 26, 9}, {12, 35, 10, 34, 26}, {23, 16, 33, 24, 26}};

String[] row Keys = {"已售","待售","订购"};

String [] column Keys = {"A#","B#","C#","D#","E#"};

Category Dataset dataset=DatasetUtilities.createCategoryDataset (rowKeys, columnKeys, data);

//创建JFreeChart，都使用Chart Factory来创建JFreeChart,很标准的工厂设计模式

JFreeChart chart = ChartFactory.createBarChart3D("大观圆销量图统计",null,null,dataset,

PlotOrientation.VERTICAL, true, false, false);

Chart.setBackgroundPaint (Color. WHITE);

Category Plot plot = chart.getCategoryPlot ();

Category Axis domain Axis = plot.getDomainAxis ();

domainAxis.setVerticalCategoryLabels(false);

Plot.setDomainAxis (domainAxis);

ValueAxis range Axis = plot.getRangeAxis ();

rangeAxis.setUpperMargin(0.15); //设置最高的一个 Item 与图片顶端的距离

//设置最低的一个 Item 与图片底端的距离

rangeAxis.setLowerMargin(0.15);

plot.setRangeAxis(rangeAxis);

BarRenderer3D renderer = new BarRenderer3D();

renderer.setBaseOutlinePaint(Color.BLACK);

renderer.setWallPaint(Color.gray); //设置 Wall 的颜色

//设置每种水果代表的柱的颜色

renderer.setSeriesPaint(0, Color.RED);

renderer.setSeriesPaint(1, new Color (0, 100, 255));

renderer.setSeriesPaint(2, Color. GREEN);

renderer.setItemMargin(0.1);  //设置每个地区所包含的平行柱的之间距离

//显示每个柱的数值，并修改该数值的字体属性

renderer.setItemLabelGenerator(new StandardCategoryItemLabelGenerator());

renderer.setItemLabelsVisible(true);

plot.setRenderer(renderer);

plot.setForegroundAlpha(0.6f);  //设置柱的透明度

//设置地区、销量的显示位置

plot.setDomainAxisLocation(AxisLocation.TOP_OR_RIGHT);

plot.setRangeAxisLocation(AxisLocation.BOTTOM_OR_RIGHT);

// 把生成的文件写入到临时的目录中

String filename = ServletUtilities.saveChartAsPNG(chart, 500, 300, null, session);

String graphURL = request.getContextPath () + "/servlet/DisplayChart? filename=" + filename; //选择存储成png格式的文件，也可以使用saveChartAsJPEG的方法生成jpg图片

%>

<Img src="<%=graphURL%>"width=500 height=300 border=0 usemap="#<%=filename%>">

此JSP程序的运行结果如图3所示。

除柱状图外，可以用JFreeChart开发其他各种图表，部分效果图例如图4所示。限于篇幅，原程序代码不再给出，具体使用方法参考JFreeChart的Java Doc API文档和Sample Code。

 

(d)线图                          (e) 时间序列图

图4  部分效果图例

 在实际的项目应用中，可以根据需要连接到数据库，从数据库中读取数据，来生成动态的各种各样的图表。

4  高级主题

图5 生成MAP数据的流程图

    有些情况下不仅要求在浏览器上显示一个图表，更需要可以直接在图表上做交互的操作，例如获取信息提示，点击图表某个部分进行更详细信息的展示等等。在HTML中为了让一个图像具有可交互的功能就必须给该图像定义一个Map对象。JFreeChart具有生成MAP对象的功能，由于JFreeChart没有直接的方法利用一个图表对象直接生成MAP数据，它需要一个中间对象ChartRenderingInfo来过渡，图5所示是生成MAP数据的流程图：

Chart Utilities类是整个流程的核心，这个流程简单描述如下：首先创建一个ChartRenderingInfo对象并在调用Chart Utilities的writeChartAsJPEG时作为最后一个参数传递进去。调用该方法结束后将产生一个图像文件以及一个填充好MAP数据的ChartRenderingInfo对象，借助于Chart Utilities的writeImageMap方法来将ChartRenderingInfo对象读取出来，把生成的图像文件以及MAP数据文件写到页面上即可完成热点图表的功能。

5  结束语

需要说明的是虽然JFreeChart是一个开源项目，但是其文档是需要购买的。还有一个问题是JFreeChart如果使用中文，它使用的默认字体显示出来的中文会很模糊，可能需要修改代码。本文通过介绍利用JFreeChart生成柱状统计图的方法，旨在抛砖引玉，读者基于此可以去开发其它各种图表，这些不同式样的图表基本上可以满足目前的需求。

参考资源

[1] 飞思科技产品研发中心. JSP应用开发详解释. 电子工业出版社. 2004.01

[2] Eckel.B著 侯捷译，  Java编程思想，  机械工业出版社，  2002.09

[3] http://www.jfree.org/jfreechart/index.html

[4] http://sourceforge.net/projects/jfreechart