使用JFreeChart来创建基于web的图表.docx

使用 JFreeChart 来创建基于 web 的图表
JFreeChart 项目简介
JFreeChart 是开放源代码站点 SourceF 上的一个 JAVA 项目，它主要用来各种各样的图表，这些图表包括：饼图、柱状图 ( 普通柱状图以及堆栈柱状图 )、线图、区域图、分布图、混合图、甘特图以及一些仪表盘等等。这些不同式样的图表基本上可以满足目前的要求。为了减少篇幅本文主要介绍前面三种类型的图表，读者可以触类旁通去开发其他样式的图表。下面几个是 JFreeChart 产生的这三种类型图表的结果：

图 1

图 2

图 3

上面的三个图都是表示四个季度的某个产品的销量信息。在继续下面小节之前必须先准备好开发环境，因为是基于 WEB 浏览器的图表展现，因此需要一个 Servlet 引擎或者是 J2EE 应用服务器（例如 WebSphere，Tomcat 等）。WEB 环境的搭建就不累赘了，读者根据喜好自行安装。JFreeChart 引擎本身需要到 SourceF 上下载，地址如下：
JFreeChart 主页：
http://www.jfree.org/jfreechart/index.html
JFreeChart 下载页面：

下载的时候需要注意的是必须下载两个文件：JFreeChart 以及 Jcommon。目前最新配套版本是：JFreeChart 0.9.11 Jcommon 0.8.6
这里有点笔者在开发中遇见的问题需要注意的是：在使用 Eclipse 开发的时候会报一个莫名其妙的错误，错误可能指向某个类文件的第一行。遇到这样的问题一般是因为没有把 Jcommon 的 jar 包设置到项目的类路径中的缘故。具体的原因不祥。
回页首
解读 JFreeChart 的源码结构
在开始使用 JFreeChart 之前我们有必要先大概了解一下 JFreeChart 本身的结构以及它所带一些例子程序，这样有助于我们下一步自行开发。下载 JFreeChart 包后已经带有非常丰富的例子，因为 JFreeChart 这个项目本身的使用文档非常少，因此学习它最好的办法就是学习它所带的例子源码。在包 org.jfree.chart.demo 中有几十个文件用于展示 JFreeChart 所能支持的所有图表的结果。如果你的 JDK 是比较新的情况下可能在运行这些例子时会有问题，现象如下：
java.lang.UnsatisfiedLinkError: initDDraw
at sun.awt.windows.Win32OffScreenSurfaceData.initDDraw(Native Method)
at sun.awt.windows.Win32OffScreenSurfaceData.<clinit>
(Win32OffScreenSurfaceData.java:141)
at sun.awt.Win32GraphicsDevice.<clinit>(Win32GraphicsDevice.java:58)
at sun.awt.Win32GraphicsEnvironment.makeScreenDevice(Win32GraphicsEnvironment.java:168)
at sun.java2d.SunGraphicsEnvironment.getScreenDevices(SunGraphicsEnvironment.java:240)
at sun.awt.Win32GraphicsEnvironment.getDefaultScreenDevice
(Win32GraphicsEnvironment.java:61)
at java.awt.Window.init(Window.java:224)
at java.awt.Window.<init>(Window.java:268)
at java.awt.Frame.<init>(Frame.java:398)
at javax.swing.JFrame.<init>(JFrame.java:198)
at org.jfree.chart.demo.JFreeChartDemo.<init>(JFreeChartDemo.java:148)
at org.jfree.chart.demo.JFreeChartDemo.main(JFreeChartDemo.java:285)
Exception in thread "main"

这个错误是由于新版的 Swing 大量的使用了微软的 DirectDraw 的技术来提高画图的性能，而可能你的显卡在这时候会跟你闹点情绪或者显卡本身并不支持这样的一个技术。难道就没有办法了嘛？要解决这个问题也非常简单，我们可以屏蔽掉 DirectDraw，不让 Swing 使用该技术就可以了。在运行这些代码时给虚拟机指定参数 -Dsun.java2d.noddraw 即可。
这时可能你又该纳闷了，不说是基于 Web 的图表嘛，怎么又扯到 Swing 上了？这是因为为了使开发者容易上手，无需配置任何运行环境，所以这些例子都是基于 GUI 方式的用于展现给开发者如果生成一个图表，我们要学习的也就是如何利用这个引擎生成图表而不是怎么来显示一个图表。当我们把生成的图表对象 Export 到一个图像文件即可在 Web 上发布。
下面我们来介绍 JFreeChart 中几个核心的对象类：
类名
类的作用以及简单描述
JFreeChart
图表对象，任何类型的图表的最终表现形式都是在该对象进行一些属性的定制。JFreeChart 引擎本身提供了一个工厂类用于创建不同类型的图表对象
XXXXXDataset
数据集对象，用于提供显示图表所用的数据。根据不同类型的图表对应着很多类型的数据集对象类
XXXXXPlot
图表区域对象，基本上这个对象决定着什么样式的图表，创建该对象的时候需要 Axis、Renderer 以及数据集对象的支持
XXXXXAxis
用于处理图表的两个轴：纵轴和横轴
XXXXXRenderer
负责如何显示一个图表对象
XXXXXURLGenerator
用于生成 Web 图表中每个项目的鼠标点击链接
XXXXXToolTipGenerator
用于生成图象的帮助提示，不同类型图表对应不同类型的工具提示类
基本上我认为 JFreeChart 项目本身的类结构的设计并不是很好，首先在创建图表的时候用到了大量的工厂方法，这样做虽然可以简化创建图表对象的代码，但是对项目本身或者开发人员来讲自行扩展一种新的图表都仍然是一件很麻烦的事情；其次除图表对象本身外其余的类过于复杂，使用者必须去了解每个类型的图表对象应该对应哪些 Axis、Plot、Renderer 类，并且必须非常熟悉这些类的构造函数中每个参数的具体含义。这些问题都大大困扰很多初学者。不过，虽然存在很多问题，但是 JFreeChart 本身仍不失为一个非常优秀的图表引擎，况且项目本身也在逐渐的发展中。
在非常简略的介绍了 JFreeChart 本身的代码结构后，下面我们开始动手试验几个常用的图表并把他们放到 web 上。
回页首
使用 JFreeChart 生成各种样式的图表
限于篇幅的问题我们在这里只实现两种常用的图表，其他类型图表读者可以触类旁通。我们先给出柱状图的实现，饼图的实现再来跟柱状图进行比较。
1 柱状图
package lius.chart.demo;
import java.io.*;
import org.jfree.data.*;
import org.jfree.chart.*;
import org.jfree.chart.plot.*;
/**
* 该类用于演示最简单的柱状图生成
* @author Winter Lau
*/
public class BarChartDemo {
public static void main(String[] args) throws IOException{
CategoryDataset dataset = getDataSet2();
JFreeChart chart = ChartFactory.createBarChart3D(
"水果产量图", // 图表标题
"水果", // 目录轴的显示标签
"产量", // 数值轴的显示标签
dataset, // 数据集
PlotOrientation.VERTICAL, // 图表方向：水平、垂直
true, // 是否显示图例(对于简单的柱状图必须是 false)
false, // 是否生成工具
false // 是否生成 URL 链接
);

FileOutputStream fos_jpg = null;
try {
fos_jpg = new FileOutputStream("D:\\fruit.jpg");
ChartUtilities.writeChartAsJPEG(fos_jpg,100,chart,400,300,null);
} finally {
try {
fos_jpg.close();
} catch (Exception e) {}
}
}
/**
* 获取一个演示用的简单数据集对象
* @return
*/
private static CategoryDataset getDataSet() {
DefaultCategoryDataset dataset = new DefaultCategoryDataset();
dataset.addValue(100, null, "苹果");
dataset.addValue(200, null, "梨子");
dataset.addValue(300, null, "葡萄");
dataset.addValue(400, null, "香蕉");
dataset.addValue(500, null, "荔枝");
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;
}
}

程序运行结束后生成的图片文件效果如下图所示：

图 4

如果是使用简单的数据即使用 getDataSet 方法获取数据集时产生的图片文件如下：

图 5

2 饼图
对于饼图而言，数据集的获取用的不是同一个数据集类，另外饼图不支持同一个类别的项目中还有子项目这样的数据。我们只给出创建饼图的代码，至于写图表到一个文件则与柱状图一致，无需重复。
package lius.chart.demo;
import java.io.*;
import org.jfree.data.*;
import org.jfree.chart.*;
/**
* 用于演示饼图的生成
* @author Winter Lau
*/
public class PieChartDemo {
public static void main(String[] args) throws IOException{
DefaultPieDataset data = getDataSet();
JFreeChart chart = ChartFactory.createPie3DChart("水果产量图", // 图表标题
data,
true, // 是否显示图例
false,
false
);
// 写图表对象到文件，参照柱状图生成源码
}
/**
* 获取一个演示用的简单数据集对象
* @return
*/
private static DefaultPieDataset getDataSet() {
DefaultPieDataset dataset = new DefaultPieDataset();
dataset.setValue("苹果",100);
dataset.setValue("梨子",200);
dataset.setValue("葡萄",300);
dataset.setValue("香蕉",400);
dataset.setValue("荔枝",500);
return dataset;
}
}

生成的饼图文件效果如下：

图 6

回页首
将生成的图表移到浏览器上
为了将生成的图表直接传给客户端浏览器，只需要将前面两个例子中的文件流换成是通过 HttpServletResponse 对象获取到的输出流，详细代码清单如下：
package lius.chart.demo;
import java.io.IOException;
import javax.servlet.*;
import javax.servlet.http.HttpServlet;
import org.jfree.data.*;
import org.jfree.chart.*;
/**
* 演示通过 servlet 直接输出图表
* @author Winter Lau
*/
public class ChartDemoServlet extends HttpServlet {
public void service(ServletRequest req, ServletResponse res)
throws ServletException, IOException
{
res.setContentType("image/jpeg");
DefaultPieDataset data = getDataSet();
JFreeChart chart = ChartFactory.createPie3DChart("水果产量图",
data,
true,
false,
false
);

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

回页首
高级主题
很多情况我们不仅仅要求可以在浏览器上显示一个图表，我们更需要客户可以直接在图表上做一下交互的操作，例如获取信息提示，点击图表某个部分进行更详细信息的展示等等。例如前面生成的简单柱状图，用户需要在看到柱状图后点击某种水果例如是苹果即可看到各个地区苹果产量的情况。为此就要求该图形具有交互操作的功能。在 HTML 中为了让一个图像具有可交互的功能就必须给该图像定义一个 Map 对象。下表节选一段具有该功能的 HTML 代码：
<MAP NAME="chartMap">
<AREA SHAPE="RECT" COORDS="81,15,126,254" href="?series=0&category=100"
title="100 = 7,048"
onclick="javascript:clickChart('100');return false;">
<AREA SHAPE="RECT" COORDS="143,27,188,255" href="?series=0&category=200"
title="200 = 6,721"
onclick="javascript: clickChart ('200');return false;">
<AREA SHAPE="RECT" COORDS="205,54,250,255" href="?series=0&category=300"
title="300 = 5,929"
onclick="javascript: clickChart ('300');return false;">
<AREA SHAPE="RECT" COORDS="267,85,312,255" href="?series=0&category=400"
title="400 = 5,005"
onclick="javascript: clickChart ('400');return false;">
<AREA SHAPE="RECT" COORDS="329,17,374,255" href="?series=0&category=Diet"
title="Diet = 7,017" onclick="javascript:
clickChart ('Diet');return false;">
</MAP>

由此就产生了一个问题：如果根据一个图像来生成对应的 MAP 对象。我们回头看看刚才的代码，在创建一个图表对象时候有两个参数，我们举柱状图的例子来讲这两个参数就是 ChartFactory. createBarChart3D 方法中的最后两个参数，这两个参数的类型都是布尔值。这两个参数意思分别是：是否创建工具提示 (tooltip) 以及是否生成 URL。这两个参数分别对应着 MAP 中一个 AREA 的 title 属性以及 href 属性。
可是我想知道的是怎么来产生这个 MAP 啊！哈哈，不要着急，JFreeChart 已经帮我们做好生成 MAP 对象的功能。为了生成 MAP 对象就要引入另外一个对象：ChartRenderingInfo。因为 JFreeChart 没有直接的方法利用一个图表对象直接生成 MAP 数据，它需要一个中间对象来过渡，这个对象就是 ChartRenderingInfo。下图是生成 MAP 数据的流程图：

图 7

如上图所示，ChartUtilities 类是整个流程的核心，它周围的对象都是一些例如数据对象或者是文件等。这个流程简单描述如下：首先创建一个 ChartRenderingInfo 对象并在调用 ChartUtilities 的 writeChartAsJPEG 时作为最后一个参数传递进去。调用该方法结束后将产生一个图像文件以及一个填充好 MAP 数据的 ChartRenderingInfo 对象，有了这个对象我们还是没有办法获取具体的 MAP 数据，我们还必须借助于 ChartUtilities 的 writeImageMap 方法来将 ChartRenderingInfo 对象读取出来，获取 MAP 数据的代码片断如下：
PrintWriter w = null;
FileOutputStream fos_jpg = null;
FileOutputStream fos_cri = null;
try{
// 根据不同类型的图表使用不同类，以下是针对饼图的操作
PiePlot plot = (PiePlot) chart.getPlot();
plot.setURLGenerator(new StandardPieURLGenerator(url));
// 设置工具提示
plot.setToolTipGenerator(new StandardPieToolTipGenerator());
fos_jpg = new FileOutputStream(“d:\\fruit.jpg”);
ChartUtilities.writeChartAsJPEG(
fos_jpg,
100,
chart,
400,
300,
info);
fos_cri = new FileOutputStream(__d:\\fruit.map__);
w = new PrintWriter(fos_cri);
ChartUtilities.writeImageMap(w, __mapname__, info);
w.flush();
}finally{
try{
w.close();
}catch(Exception e){}
try{
fos_cri.close();
}catch(Exception e){}
try{
fos_jpg.close();
}catch(Exception e){}
}

打开文件 D:\fruit.map，文件的内容就是要写到页面上的 MAP 数据。把生成的图像文件以及 MAP 数据文件写到页面上即可完成热点图表的功能。至于怎么结合两者之间的关系例如图像的 useMap 属性值必须与 MAP 对象的名称结合起来，必须根据实际的应用情况进行相应的处理。笔者建议把二者通过标签库封装起来，图像文件的名称以及 MAP 对象的名称由标签库统一进行控制，这样可以保证二者的一致性。
使用HTML5和CSS3构建基于webkit的Web Page/App
现在在ios/android上的web网站变的越来越多，智能机中ios和android系统的设备市场份额也是与日俱增，相信未来会是一个趋势，那么如何构建基于webkit的网站呢？这里有一篇文章介绍了如何用html5创建一个iphone的app，这是一个基于web的本地离线应用，相对于native应用来说基于web的应用开发和测试都非常快捷，基于webkit浏览器支持大部分的html5，也支持大部分的css3，而且开发语言也是大多数web工程师所熟悉的，最重要的一点是基于web的应用是完全跨平台的，不需要多平台的开发和测试。
开发基于webkit的web app/page时需要注意的有：
HTML特性：
<input type=”file” />在iphone上不work
<a href=”13888888888″>Call Me</a>可以调用打电话应用
google maps, iTunes和youtube的链接会在iphone上打开相应的组件
app/web page设置：
<link rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/> 在设置书签的时候可以显示好看的图标
<meta name=”apple-mobile-web-app-capable” content=”yes” /> 离线应用的另一个技巧
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” /> 隐藏状态栏
<link rel=”apple-touch-startup-image” href=”startup.png” /> 设置开始页面图片
<meta name=”viewport” content=”width=device-width, user-scalable=no” /> 指定mobile，并且不可缩放
<meta name=”viewport” content=”width=device-width, minimum-scale=1.0, maximum-scale=1.0″ /> 同上
CSS相关配置：
@media screen and (max-device-width: 480px){
/* 小屏幕的css样式 */
}

@media screen and (max-width: 320px){
/* 纵向的css样式 */
}

@media screen and (max-width:480px){
/* 横向的css样式 */
}

@media screen and (orientation: portrait){
/* iPad 纵向的css样式 */
}

@media screen and (orientation:landscape){
/* iPad 横向的css样式 */
}
display: -webkit-box; -webkit-box-orient:vertical/horizontal; -webkit-box-flex: value 水平垂直布局box
rounded corner/text shadow/box shadow/rgba/font-face/transform/transition/animation/border-image/gradients/ 充分利用这些css3的特性做出丰富的UI
脚本特性：
可以选用开源的javascript库，如yui, jquery, mootools, dojo …
垂直的js库，如canvas游戏库有LimeJs, GameJs等，Mobile UI库如jquery mobile, sencha touch, iui等，以及其它各种库
隐藏标题栏 – addEventListener(“load”, function() { setTimeout(function (){ window.scrollTo(0,1);}, 0); }, false);
webkitTransitionEnd/webkitAnimationStart/webkitAnimationIteration/webkitAnimationEnd transition/animation事件
localstorage/manifest 离线应用
模拟iphone的scroll效果，解决Mobile Safari下不支持position:fixed的问题：touch scroll, demo

调试：
safari上可以设置user agent为iphone上的safari（preference->advaced->developer tool)，还可以手动添加android的user agent{ Mozilla/5.0 (Linux; U; Android 2.1; en-us; Nexus One Build/ERD62) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 –Nexus }
iphone的safari上有debug调试
关注Mobile性能问题，可以采用firebuglite等书签脚本来调试
文章的标题说的是web app/page，其实用html5和css3构建的app和page没啥区别，web page也很容易转换成native的app，通过phoneGap就可以了，phoneGap所做的就是在一个native的app内嵌入了一个类似chrome的浏览器，并且创建了一个桥接，从而直接去写web app就可以了，就像这个slide的标题写的一样“HTML5 is the Future of Mobile, PhoneGap Takes You There Today”，你的app可以在5个以上的平台上运行，使用的技术是你所熟悉的html/js/css，还等什么，赶快看看它的文档实践一下吧。