JFreeChart以及Cewolf使用

JFreeChart是一组功能强大、灵活易用的Java绘图API，使用它可以生成多种通用性的报表，包括柱状图、饼图、曲线图、甘特图等。它能够用在Swing和Web等中制作自定义的图表或报表，并且得到广泛的应用。本文将通过引领读者学习在JFreeChart中饼图、柱状图和曲线图的进阶应用，来达到熟练使用JFreeChart的目的。
一． 下载与环境配置
1. 下载JFreeChart
JFreeChart是开放源代码的免费软件，但是它的支持文档需要付费才能得到。其下载地址为：http://sourceforge.net/project/showfiles.php?group_id=15494，当前最新版本为1.0.9。笔者下载的是1.0.9最新版。
说明：1）source目录：为jfreechart的源码目录；
2）lib目录：为包目录，我们需要关注的包为jfreechart-1.0.9.jar、gnujaxp.jar和jcommon-1.0.12.jar这三个包；
3）根目录下的jfreechart-1.0.9-demo.jar是例子程序，大家双击后可看到其中有很多例子的运行结果。
2. 环境配置
笔者的开发环境如下：
JDK：1.6
MyEclipse：MyEclipse-6.0M1
Tomcat：6.0
为了后续的“用JFreeChart创建基于Web的图表”的一个例子的展示，我们在MyEclipse中创建一个名为jfreechart的Web工程。将下载的JFreeChart1.0.9下lib目录下的jar包拷贝到WebRoot/WEB-INF/lib目录下。另外还需要在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>/DisplayChart</url-pattern>
</servlet-mapping>

在WebRoot目录下建立bar目录，用来存放柱状图的各个例子。首先在该目录下建立一个sample1.jsp文件，让我们来看一个简单的柱状图的例子，修改后的sample1.jsp的内容如下所示：

<%@ 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.DefaultCategoryDataset"%><%
DefaultCategoryDataset dataset = new DefaultCategoryDataset();
dataset.addValue(610, "广州", "猪肉");
dataset.addValue(220, "广州", "牛肉");
dataset.addValue(530, "广州", "鸡肉");
dataset.addValue(340, "广州", "鱼肉");
JFreeChart chart = ChartFactory.createBarChart3D("肉类销量统计图",
"肉类",
"销量",
dataset,
PlotOrientation.VERTICAL,
false,
false,
false);
String filename = ServletUtilities.saveChartAsPNG(chart, 500, 300, null, session);
String graphURL = request.getContextPath() + "/DisplayChart?filename=" + filename;
%>
<img src="<%= graphURL %>" width=500 height=300 border=0 usemap="#<%= filename %>">
在浏览器中输入地址：http://localhost:8080/jfreechart/bar/sample1.jsp，可看到如下柱状图：
面的这个柱状图比较简单，稍显单调，在有些情况下，我们需要用不同颜色来表示不同的种类，或者在种类上标上具体数值，亦或需要加上3D水晶效果。下面让我们来做更深一步的探讨。接下来让我们看一个用不同颜色来表示不通种类的例子。在WebRoot的bar目录下新建sample2.jsp页面，将其代码修改如下：



<%@ 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,
org.jfree.data.general.DatasetUtilities"%><%
double[][] data = new double[][] {{1310,720,1130,440}};
String[] columnKeys = {"猪肉", "牛肉","鸡肉", "鱼肉"};
String[] rowKeys = {""};
CategoryDataset dataset = DatasetUtilities.createCategoryDataset(rowKeys, columnKeys, data);
JFreeChart chart = ChartFactory.createBarChart3D("广州肉类销量统计图",
"肉类",
"销量",
dataset,
PlotOrientation.VERTICAL,
true,
false,
false);
String filename = ServletUtilities.saveChartAsPNG(chart, 500, 300, null, session);
String graphURL = request.getContextPath() + "/DisplayChart?filename=" + filename;
%>
<img src="<%= graphURL %>" width=500 height=300 border=0 usemap="#<%= filename %>">
该页面的运行效果如下图所示：




对比该例与前例，可看出createBarChart3D的倒数第三个参数修改成了true，该参数可用来显示下方的： 。上两例我们显示的只是一个城市的肉类销量，有时候我们有对比显示多个城市的不同肉类，只要将上例稍作修改即可。例如要在图中表示广州、深圳、东莞、佛山四个城市的四个肉类的销售情况，只需要将如下三句稍做修改：

double[][] data =newdouble[][] {{1310}, {720}, {1130}, {440}};
String[] rowKeys = {"猪肉", "牛肉","鸡肉", "鱼肉"};
String[] columnKeys = {""};
例如修改成：
double[][] data =newdouble[][] {{1310, 1220, 1110, 1000},
{720, 700, 680, 640},
{1130, 1020, 980, 800},
{440, 400, 360, 300}};
String[] rowKeys = {"猪肉", "牛肉","鸡肉", "鱼肉"};
String[] columnKeys = {"广州", "深圳", "东莞", "佛山"};

在运行该jsp页面，可看到如下界面：
行效果如下所示：



注意：jfreechart的很多版本不兼容，请大家在运行此例时确认下载了对应的版本。
四．曲线图
接着我们来介绍曲线图的使用。在笔者日常的开发工作中，曲线图用得最多，它可以用来绘制趋势图、统计分析等。首先我们在WebRoot下建立一个line目录，用来存放曲线图实例的jsp页面。我们在该目录下建立sample1.jsp页面来做一个简单的曲线图的例子。在开始编码前，让我们来看看与画曲线图密切相关的几个类：
1） TimeSeriesCollection
曲线数据的集合。
2） TimeSeries
曲线信息序列。
3） ChartFactory
可以利用该类的createTimeSeriesChart方法来创建曲线的JFreeChart对象。

在下例中，我们显示阿蜜果的blog在2007年度各月份的访问量情况，修改后的sample1.jsp的内容如下：
<%@ page contentType="text/html;charset=GBK"%>
<%@ page import = "org.jfree.chart.ChartFactory,
org.jfree.chart.JFreeChart,
org.jfree.chart.servlet.ServletUtilities,
org.jfree.chart.title.TextTitle,
org.jfree.data.time.TimeSeries,
org.jfree.data.time.Month,
org.jfree.data.time.TimeSeriesCollection,
java.awt.Font"%>
<%
//访问量统计时间线
TimeSeries timeSeries = new TimeSeries("阿蜜果blog访问量统计", Month.class);
//时间曲线数据集合
TimeSeriesCollection lineDataset = new TimeSeriesCollection();

//构造数据集合
timeSeries.add(new Month(1, 2007), 11200);
timeSeries.add(new Month(2, 2007), 9000);
timeSeries.add(new Month(3, 2007), 6200);
timeSeries.add(new Month(4, 2007), 8200);
timeSeries.add(new Month(5, 2007), 8200);
timeSeries.add(new Month(6, 2007), 12200);
timeSeries.add(new Month(7, 2007), 13200);
timeSeries.add(new Month(8, 2007), 8300);
timeSeries.add(new Month(9, 2007), 12400);
timeSeries.add(new Month(10, 2007), 12500);
timeSeries.add(new Month(11, 2007), 13600);
timeSeries.add(new Month(12, 2007), 12500);

lineDataset.addSeries(timeSeries);
JFreeChart chart = ChartFactory.createTimeSeriesChart("访问量统计时间线", "月份", "访问量", lineDataset, true, true, true);

//设置子标题
TextTitle subtitle = new TextTitle("2007年度", new Font("黑体", Font.BOLD, 12));
chart.addSubtitle(subtitle);
//设置主标题
chart.setTitle(new TextTitle("阿蜜果blog访问量统计", new Font("隶书", Font.ITALIC, 15)));
chart.setAntiAlias(true);

String filename = ServletUtilities.saveChartAsPNG(chart, 500, 300, null, session);
String graphURL = request.getContextPath() + "/DisplayChart?filename=" + filename;
%>
<img src="<%= graphURL %>"width=500 height=300 border=0 usemap="#<%= filename %>">
运行后的曲线效果如下图所示：




有时我们需要显示各数据点及其数值，这是我们需要对上例进行一点改动，在JFreeChart chart = ChartFactory.createTimeSeriesChart……后，TextTitle subtitle = new TextTitle……前加上如下的代码：
XYPlot plot = (XYPlot) chart.getPlot();
XYLineAndShapeRenderer xylineandshaperenderer = (XYLineAndShapeRenderer)plot.getRenderer();
//设置网格背景颜色
plot.setBackgroundPaint(Color.white);
//设置网格竖线颜色
plot.setDomainGridlinePaint(Color.pink);
//设置网格横线颜色
plot.setRangeGridlinePaint(Color.pink);
//设置曲线图与xy轴的距离
plot.setAxisOffset(new RectangleInsets(0D, 0D, 0D, 10D));
//设置曲线是否显示数据点
xylineandshaperenderer.setBaseShapesVisible(true);
//设置曲线显示各数据点的值
XYItemRenderer xyitem = plot.getRenderer();
xyitem.setBaseItemLabelsVisible(true);
xyitem.setBasePositiveItemLabelPosition(new ItemLabelPosition(ItemLabelAnchor.OUTSIDE12, TextAnchor.BASELINE_LEFT));
xyitem.setBaseItemLabelGenerator(new StandardXYItemLabelGenerator());
xyitem.setBaseItemLabelFont(new Font("Dialog", 1, 14));
plot.setRenderer(xyitem);

该例的运行效果如下：




五． 总结
本文通过详尽的实例讲述了如何利用JFreeChart开发常用的柱状图、饼图和曲线图。从这些实例中可以看出，JFreeChart是我们开发图表或报表的理想选择，它简单易用，并且容易理解，是我们开发的利刃。
1


介绍:Cewolf
写在JSP页面中的Cewolf,能用于基于web工程的Servlet/JSP,来制作复杂的统计图表.它提供几乎图的所有特征,象颜色,线条,图形等等.所以能够在不写任何JAVA代码的情况下让JSP页面显示图表.
Cewolf是基于JFreechart的,利用JFreechart的绘制引擎,将最终的图片写入客户端.在服务器端不会创建任何文件.一切都是基于轻量级的会话对象和动态的数据分析的.
Cewolf有一个单例的servlet,这个servlet用来处理图的绘画和标签库时,用这个标签库将在JSP页面的图的定义转成HTML img tag,servlet按HTML img tag绘制想要的图片送给客户端.
特点:
1:免费开源
2:可跑于J2EE compliant server or servlet container
3:图标签库特征: 1:jsp不需要编写java代码
2:由xml编写
4:图类型丰富: Line [XY]
[3D] Pie 
[3D] Horizonal Bar
[3D] Vertical [XY] Bar
[3D] Stacked Vertical Bar
Area [XY]
Scatter Plot
Candlestick
High Low
Gantt
Overlaid
Combined
例子:在JSP中写下以下代码来表示一个图
<cewolf:chart    
id="XYChart"   
type="xy"   
title="XYChart"    
<cewolf:gradient>       
<cewolf:point x="0" y="0" color="#FFFFFF"/>
<cewolf:point x="0" y="300" color="#C8C8C8"/>
</cewolf:gradient>   
<cewolf:data>       
<cewolf:producer id="xyData"/>  
</cewolf:data>
</cewolf:chart>
<cewolf:img chartid="XYChart" renderer="cewolf" width="400" height="300"/>图示:
第一步:准备
下载标签库jar包：http://cewolf.sourceforge.net/new/index.html
将jar包下/Lib文件内容放在工程的/WEB-INF/lib 下面，/Lib文件内容:
jfreechart-*-demo.jar
jfreechart-*.jar
jcommon-*.jar
可以从jfreechart包里取的。也可以用自带的
commons-logging.jar
cewolf.jar
batik-xml.jar
batik-util.jar
batik-svggen.jar
batik-dom.jar
batik-awt-util.jar
Mozilla浏览器需要/example目录下的overlib.js，放入webapps根目录下。
在用Cewolf标签出现问题时，例如："No Tags" is displayed in your containers console。你可以将cewolf.tld或cewolf-1.1.tld  文件放入你在WEB项目根目录下的新建的文件夹中，就能在JSP中使用这些标签
第二步：生成一个DatasetProducer
因为Cewolf使用MVC (Model-View-Control)处理显示在图中的数据，而这些数据是于定义在JSP页面中的VIEW层分离开的。为了给图提供正确的数据，你必须生成一个实现了de.laures.cewolf.DatasetProducer接口的对象，每次重画一个新的图的时候这个对象将被用到。
下面请看一个DatasetProducer实现的例子。

package de.laures.cewolf.example;
import java.io.Serializable;
import java.util.Date;
import java.util.Map;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.jfree.data.category.CategoryDataset;
import org.jfree.data.category.DefaultCategoryDataset;
import de.laures.cewolf.DatasetProduceException;
import de.laures.cewolf.DatasetProducer;
import de.laures.cewolf.links.CategoryItemLinkGenerator;
import de.laures.cewolf.tooltips.CategoryToolTipGenerator;
/** 
* An example data producer.
* @author  Guido Laures 
*/
public class PageViewCountData implements DatasetProducer, 
CategoryToolTipGenerator, 
CategoryItemLinkGenerator, 
Serializable {
    private static final Log log = LogFactory.getLog(PageViewCountData.class);
    // These values would normally not be hard coded but produced by
// some kind of data source like a database or a file
private final String[] categories = { "mon",
"tue", 
"wen", 
"thu",
"fri",
"sat", 
"sun"};
private final String[] seriesNames = { "cewolfset.jsp",
"tutorial.jsp", 
"testpage.jsp",
"performancetest.jsp"};
 /**
*  Produces some random data.
*/
public Object produceDataset(Map params) 
throws DatasetProduceException {
log.debug("producing data.");
DefaultCategoryDataset dataset = new DefaultCategoryDataset(){
/**
* @see java.lang.Object#finalize()
*当垃圾回收器确定不存在对该对象的更多引用时，
*由对象的垃圾回收器调用此方法
*/
protected void finalize() throws Throwable {
super.finalize();
log.debug(this +" finalized.");
}
};
for (int series = 0; series < seriesNames.length; series ++) {
int lastY = (int)(Math.random() * 1000 + 1000);
for (int i = 0; i < categories.length; i++) {
final int y = lastY + (int)(Math.random() * 200 - 100);
lastY = y;
dataset.addValue(y, seriesNames[series], categories[i]);
}
}
return dataset;
}
    /**
* This producer's data is invalidated after 5 seconds. By this method the
* producer can influence Cewolf's caching behaviour the way it wants to.
*/
public boolean hasExpired(Map params, Date since) {  
log.debug(getClass().getName() + "hasExpired()");
return (System.currentTimeMillis() - since.getTime())  > 5000;
}
 /**
* Returns a unique ID for this DatasetProducer
*/
public String getProducerId() {
return "PageViewCountData DatasetProducer";
}
    /**
* Returns a link target for a special data item.
*/
public String generateLink(Object data, int series, Object category) {
return seriesNames[series];
}

/**
* @see java.lang.Object#finalize()
*/
protected void finalize() throws Throwable {
super.finalize();
log.debug(this + " finalized.");
}
 /**
* @see org.jfree.chart.tooltips.CategoryToolTipGenerator#generateToolTip(CategoryDataset, int, int)
*/
public String generateToolTip(CategoryDataset arg0, int series, int arg2) {
return seriesNames[series];
}
}

正如所见，这个datasetproducer不是很有用，通常，这个类会去访问一个数据源（例如一个数据库）获得需要的数据，这里仅作例子展示而已。
一个DatasetProducer需要实现3个方法，最重要的一个是produceDataset()方法，它实际上生成了一个用于画图的数据。这个方法用一个map作参数，这个map由许多指定的JSP标签填充，这个一会再介绍。
在当前生数据成器确实生成数据对象后，方法hasExpired()被才被Cewolf框架调用。当返回TRUE时，产生器将释放以前的数据。
Cewolf框架通过 getProducerId()方法提生成的一个唯一ID来标识一个生成者。2个具有相同ID生成实例将被认为时生成相同的数据。
编译该方法，然后把它放在WEB工程的/WEB-INF/类目录下。
第三步：在WEB工程下安装Cewolf Servlet
整个图的绘制由一个servle产生，所以要事先装入WEB工程，Cewolf提供了一个servlet类de.laures.cewolf.CewolfRenderer用来完成这个工作。
为了配置你的web工程，你必须编辑 /WEB-INF/web.xml，添加下列行
<servlet>
<servlet-name>CewolfServlet</servlet-name>
<servlet-class>de.laures.cewolf.CewolfRenderer</servlet-class>
</servlet>
另外你要提供一个servlet-mapping来告诉容器URL与Cewolf绘图servlet的映射关系.
Additionally you should provide a servlet-mapping to tell the container which URL maps to your Cewolf rendering servlet.
<servlet-mapping>
<servlet-name>CewolfServlet</servlet-name> 
<url-pattern>/cewolf/ *</url-pattern>
</servlet-mapping>
你还需要告诉CeWolf的启动：
<load-on-startup>1</load-on-startup>
检查配置是否正确：
例如浏览器输入http://localhost:8080/myapp/cewolf?state).
Cewolf应该回应: "Cewolf servlet up and running."

<web-app>
<servlet>
<servlet-name>CewolfServlet</servlet-name>
<servlet-class>de.laures.cewolf.CewolfRenderer</servlet-class>
<!-- sets storage implementation -->
<init-param>
<param-name>storage</param-name>
<param-value>de.laures.cewolf.storage.TransientSessionStorage</param-value>
</init-param>
<!-- sets overlib.js location relative to webapp -->
<init-param>
<param-name>overliburl</param-name>
<param-value>etc/overlib.js</param-value>
</init-param>
<!-- turn on or off debugging logging -->
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
  <servlet-mapping>
<servlet-name>CewolfServlet</servlet-name>
<url-pattern>/chart/chart.servlet</url-pattern>
</servlet-mapping>
  <session-config>
<session-timeout>1</session-timeout>
</session-config>
  <mime-mapping>
<extension>css</extension>
<mime-type>text/css</mime-type>
</mime-mapping>
  <welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
</welcome-file-list>

<!-- resource-ref>
<description>
Resource reference to a factory for java.sql.Connection
instances that may be used for talking to a particular
database that is configured in the server.xml file.
</description>
<resource-ref-name>
jdbc/testdb
</resource-ref-name>
<res-type>
javax.sql.DataSource
</res-type>
<res-auth>
Container
</res-auth>
</resource-ref -->
</web-app>

第四步：在JSP定义图

<%@page contentType="text/html"%>
<%@taglib uri='/WEB-INF/cewolf.tld' prefix='cewolf' %>
<HTML>
<BODY>
<H1>Page View Statistics</H1>
<HR>
<jsp:useBean id="pageViews" 
class="de.laures.cewolf.example.PageViewCountData"/>
<cewolf:chart id="line" title="Page View Statistics" 
type="line" xaxislabel="Page" yaxislabel="Views"> 
<cewolf:data>      
<cewolf:producer id="pageViews"/> 
</cewolf:data>
</cewolf:chart>
<p>
<cewolf:img chartid="line" renderer="/chart/chart.servlet" 
width="400" height="300"/>
<P>
</BODY>
</HTML>

正如所见，有3个cewolf的标签。<cewolf:chart>定义一个可参数化的图，
具体的绘画是交给<cewolf:img>标签的，它向HTML页面添加的正确的<img>标签。
JSP页面中两个cewolf标签之间的关联是通过使用相同的ID。
当在客户端浏览器调用这个JSP时，你能看到静态的图。如果失败，你可以查看容器的日志文件。
第五步：生成ImageMap和Tooltip信息
为了给你的图生成ImageMap和Tooltip信息，你必须自己额外写java类或者修改象下面的一个已经存在的类。在这一步我们将向datasetproducer添加新的方法。
... 
public String generateLink(Object data, int series, Object category)
{    return seriesNames[series];  } 
public String generateToolTip(CategoryDataset arg0, int series, int arg2)
{    return seriesNames[series];  }
...
可见，生成ImageMap和Tooltip信息是很简单的事情，
首先要实现接口CategoryItemLinkGenerator和CategoryToolTipGenerator (因为生成的是CategoryDataset). 别的数据类型请参见cewolf java api：http://cewolf.sourceforge.net/new/apidoc/index.html
de.laures.cewolf.tooltips下有4个接口：
CategoryToolTipGenerator
PieToolTipGenerator
ToolTipGenerator
XYToolTipGenerator
为了能让你的类能在图片上生成ImageMap和Tooltip，你必须对<cewolf:img>做如下修改：
<cewolf:img chartid="line" renderer="/chart/chart.servlet" width="400" height="300">  
<cewolf:map tooltipgeneratorid="pageViews" linkgeneratorid="pageViews" />
</cewolf:img>
重新ANT你的页面，你将在数据点看到tooltips和links。浏览器在绘制上面有细小的不同，因为他们能在一个image map绘制基于alt属性的tooltip。而别的浏览器需要overlib.js的支持。Cewolf能试着确定可用的浏览器并清晰的绘制正确的页面。

评论

1 楼 dylloveyou 2009-02-02  

Cewolf和Struts1结合你用过吗，我怎么配置不好啊，多谢指点。