JFreeChart_web（二）

JFreeChart个人认为最出色的还是在web中的应用，很多时候我们直接在JSP页面生成统计图。

个人认为，JFreeChart作为web应用比Application应用强大的就是和用户的互动显示。

为了更好的解耦，JFreeChart提供了一个名为“DisplayChart”的servlet。我们要在web.xml中配置DisplayChart Servlet，配置方法如下：

[c-sharp] view plain copy

<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>

当我们用DisplayChart来显示web服务器临时目录下的统计图片的时候，需要传入一个fileName参数，所以我们要指定一个filename参数。

下面是JSP页面显示带热点交互功能的<img...../>html标签代码片段。

<img src="DisplayChart?filename=<%=filename%>" width="800" height=500 border=0 usemap="#map0" alt="">

下面我就以折线图为列，展现一下JFreeChart在web中的应用：

struts-jfreechart.xml ：

[xhtml] view plain copy

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="jfreechart" extends="struts-default" namespace="/jfreechartTest">
<action name="lineChart" class="com.jfreechart.JFreeChartTest" method="lineChartTest">
<result name="success" type="freemarker">/WEB-INF/page/jfreechart/lineChart/lineChart.ftl</result>
</action>
</package>
</struts>

index.html:

[xhtml] view plain copy

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>index.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
测试JFreeChart<br />
<a href="jfreechartTest/lineChart.action" mce_href="jfreechartTest/lineChart.action" target="_blank">JFreeChart实例</a>
</body>
</html>

lineChart.ftl:

[xhtml] view plain copy

<html>
<head>
<mce:script src="../js/jquery.js" mce_src="js/jquery.js" type="text/javaScript"></mce:script>
<mce:script type="text/javascript"><!--
function viewChart(){
$.ajaxSetup ({
cache: false
});
$('#imgResult').html('图形生成中，请稍候...');
$('#imgResult').load("../imgChart/lineChart.jsp");
}
// --></mce:script>
</head>
<body>
<input type="button" value="生成曲线图" onclick="viewChart()"/>
<hr/>
<div id="imgResult" style="text-align:center;" mce_style="text-align:center;">
</body>
</html>

下面是最重要的部分,为了方便我将生成JFreeChart的代码嵌入JSP页面了，实际中一般都会提炼一个公共的方法的：

lineChart.jsp

[java] view plain copy

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="org.jfree.data.category.DefaultCategoryDataset,
org.jfree.chart.ChartFactory,
org.jfree.chart.JFreeChart,
org.jfree.chart.axis.NumberAxis,
org.jfree.chart.plot.CategoryPlot,
org.jfree.chart.plot.PlotOrientation,
org.jfree.chart.renderer.category.LineAndShapeRenderer,
org.jfree.chart.*,
org.jfree.chart.entity.*,
org.jfree.chart.labels.*,
org.jfree.chart.title.TextTitle,
org.jfree.chart.servlet.ServletUtilities,
org.jfree.chart.axis.CategoryAxis"%>
<%@ page import="java.util.Random,
java.awt.Color,
java.awt.Font,
java.io.PrintWriter"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<%
System.out.println("------- start ----------");
//输出
PrintWriter pw = new PrintWriter(out);
//数据源
DefaultCategoryDataset defaultcategorydataset = new DefaultCategoryDataset();
int i=0;
Random rand = new Random();
while(i<3){
for(int j=1;j<30;j++){
defaultcategorydataset.addValue(rand.nextInt(10),"series"+i,j+"");
}
i++;
}
//JFreeChart对象参数：标题，目录轴显示标签，数值轴显示标签，数据集，是否显示图例，是否生成工具，是否生成URL连接
JFreeChart imgChart =ChartFactory.createLineChart("","X轴","Y轴",defaultcategorydataset,PlotOrientation.VERTICAL, true, true, false);
imgChart = makeUpImgChart(imgChart);
//生成RenderingInfo实例，用于热点
ChartRenderingInfo info = new ChartRenderingInfo(new StandardEntityCollection());
String filename = ServletUtilities.saveChartAsPNG(imgChart, 800, 500, info, session);
String graphURL = request.getContextPath() + "/DisplayChart?filename=" + filename;
//info参数就是图片的热点信息
ChartUtilities.writeImageMap(pw, "map0", info, false);
pw.flush();
System.out.println("-------over----------");
%>
<%!
//设置JFreeChart属性值
JFreeChart makeUpImgChart(JFreeChart imgChart) {
imgChart.setBackgroundPaint(Color.white);
imgChart.setBorderVisible(true);//边框可见
TextTitle title=new TextTitle("测试曲线图",new Font("宋体",Font.BOLD,20));
//解决曲线图片标题中文乱码问题
imgChart.setTitle(title);
//解决图表底部中文乱码问题
//imgChart.getLegend().setItemFont(new Font("宋体", Font.PLAIN, 12));
CategoryPlot categoryplot = (CategoryPlot)imgChart.getPlot();
categoryplot.setBackgroundPaint(Color.lightGray);
categoryplot.setRangeGridlinePaint(Color.white);
//取Y轴
NumberAxis numberaxis = (NumberAxis)categoryplot.getRangeAxis();
numberaxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits());
//是否显示零点
numberaxis.setAutoRangeIncludesZero(true);
numberaxis.setAutoTickUnitSelection(false);
//解决Y轴标题中文乱码
numberaxis.setLabelFont(new Font("sans-serif", Font.PLAIN, 14));
//设置Y轴数据间隔
//numberaxis.setTickUnit(new NumberTickUnit(10000));
//取x轴
CategoryAxis domainAxis = (CategoryAxis)categoryplot.getDomainAxis();
//解决x轴坐标上中文乱码
domainAxis.setTickLabelFont(new Font("sans-serif", Font.PLAIN, 11));
//解决x轴标题中文乱码
domainAxis.setLabelFont(new Font("宋体", Font.PLAIN, 14));
//用于显示X轴刻度
domainAxis.setTickMarksVisible(true);
//数据点
LineAndShapeRenderer lineandshaperenderer = (LineAndShapeRenderer)categoryplot.getRenderer();
//series 点（即数据点）可见
lineandshaperenderer.setBaseShapesVisible(true);
//显示数据点的数据
lineandshaperenderer.setBaseItemLabelGenerator(new StandardCategoryItemLabelGenerator());
//显示折线图点上的数据
lineandshaperenderer.setBaseItemLabelsVisible(true);
return imgChart;
}
%>
<table width="100%">
<tr>
<td align="center">
<img src="<%= graphURL %>" width="800" height=500 border=0 usemap="#map0" alt="">
</td>
</tr>
</table>
</body>
</html>

下面就是形成的图片：

jfreechart配置方法：

一、JFreeChart获取。
JFreeChart是JFreeChart公司在开源网站SourceForge.net上的一个项目，该公司的主要产品有如下：
1、JFreeReport：报表解决工具
2、JFreeChart：Java图形解决方案（Application/Applet/Servlet/Jsp）
3、JCommon：JFreeReport和JFreeChart的公共类库
4、JFreeDesigner：JFreeReport的报表设计工具

我们可以从jfree官方网站上获取最新版本和相关资料（但是jfree的document需要40美金才能获取），
获取地址：http://www.jfree.org/jfreechart/index.html（同时可以获得简明介绍）
我们以当前最新版本：jfreechart_0.9.21.zip为例子进行说明。

二、JFreeChart配置安装
1、解压jfreechart_0.9.21.zip到指定位置，其中source是jfreechart的源码，jfreechart-0.9.21-demo.jar
是例子程序（该部分留给大家自己去研究）
2、为了配置成功，我们需要关注的文件有如下三个：jfreechart-0.9.21.jar、lib\jcommon-0.9.6.jar、
lib\gnujaxp.jar
3、如果是Application开发，把上述三个文件拷贝到%JAVA_HOME%\LIB中，同时在环境变量CLASSPATH中加入
如果是WEB开发，以TOMCAT中的一个WEB项目TEST为例子说明：
把上述三个文件拷贝到TEST\WEB-INF\LIB中，然后修改TEST\WEB-INF\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>/servlet/DisplayChart</url-pattern>
</servlet-mapping>
至此jfreechart的配置就完成了，下面就可以进行jfreechart的开发了。这里值得提出的是jfreechart的类
结构设计前后兼容性不是很好，不同版本的jfreechart中类库结构可能不一样，有时候可能需要查源码。如果
是中文显示的时候可能依据观感需要改变源码的字体，不过我个人觉得这个版本比以前版本要好一些。

三、JFreeChart功能介绍
JFreeChart目前是最好的java图形解决方案，基本能够解决目前的图形方面的需求，主要包括如下几个方面：
pie charts (2D and 3D)：饼图（平面和立体）
bar charts (regular and stacked, with an optional 3D effect)：柱状图
line and area charts：曲线图
scatter plots and bubble charts
time series, high/low/open/close charts and candle stick charts：时序图
combination charts：复合图
Pareto charts
Gantt charts：甘特图
wind plots, meter charts and symbol charts
wafer map charts
(态图表,饼图(二维和三维) , 柱状图 (水平,垂直),线图,点图,时间变化图,甘特图, 股票行情图,混和图, 温度计图, 刻度图等常用商用图表)
图形可以导出成PNG和JPEG格式，同时还可以与PDF和EXCEL关联

JFreeChart核心类库介绍：
研究jfreechart源码发现源码的主要由两个大的包组成：org.jfree.chart,org.jfree.data。其中前者主要与图形
本身有关，后者与图形显示的数据有关。具体研究如果大家有兴趣的话可以自己研究，以后有时间我会告诉大家怎么去
研究源码。
核心类主要有：
org.jfree.chart.JFreeChart：图表对象，任何类型的图表的最终表现形式都是在该对象进行一些属性的定制。JFreeChart引擎本身提供了一个工厂类用于创建不同类型的图表对象
org.jfree.data.category.XXXDataSet:数据集对象，用于提供显示图表所用的数据。根据不同类型的图表对应着很多类型的数据集对象类
org.jfree.chart.plot.XXXPlot：图表区域对象，基本上这个对象决定着什么样式的图表，创建该对象的时候需要Axis、Renderer以及数据集对象的支持
org.jfree.chart.axis.XXXAxis：用于处理图表的两个轴：纵轴和横轴
org.jfree.chart.render.XXXRender：负责如何显示一个图表对象
org.jfree.chart.urls.XXXURLGenerator:用于生成Web图表中每个项目的鼠标点击链接
XXXXXToolTipGenerator:用于生成图象的帮助提示，不同类型图表对应不同类型的工具提示类

四、JFreeChart开发（Application/Applet）
1、pie charts，代码如下
/**
* Description:This application is the first jfreechart
* Datetime:20058-02-11
*/
package demo;

import org.jfree.chart.JFreeChart;
import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartFrame;
import org.jfree.data.general.DefaultPieDataset;

public class FirstJFreeChart {
public FirstJFreeChart() {
}

public static void main(String[] args){
DefaultPieDataset dpd = new DefaultPieDataset();
dpd.setValue("管理人员",25);
dpd.setValue("市场人员",25);
dpd.setValue("开发人员",45);
dpd.setValue("其他人员",5);

//Create JFreeChart object
//参数可以查看源码
JFreeChart pieChart = ChartFactory.createPieChart("CityInfoPort公司组织架构图",dpd,true,true,false);
ChartFrame pieFrame = new ChartFrame("CityInfoPort公司组织架构图",pieChart);
pieFrame.pack();
pieFrame.setVisible(true);
}
}

上面例子可以进一步改进，如下：
/**
* Description:This application is the first jfreechart
* Datetime:20058-02-11
*/
package com.cityinforport.demo;

import org.jfree.chart.JFreeChart;
import org.jfree.chart.ChartPanel;
import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartFrame;
import org.jfree.data.general.DefaultPieDataset;
import org.jfree.chart.plot.PiePlot;
import org.jfree.data.general.PieDataset;
import org.jfree.ui.ApplicationFrame;
import org.jfree.ui.RefineryUtilities;
import java.awt.Font;
import javax.swing.*;

public class FirstJFreeChart extends ApplicationFrame {
//构造函数
public FirstJFreeChart(String s){
super(s);
setContentPane(createDemoPanel());
}

public static void main(String[] args){
FirstJFreeChart fjc = new FirstJFreeChart("CityInfoPort公司组织架构图");
fjc.pack();
RefineryUtilities.centerFrameOnScreen(fjc);
fjc.setVisible(true);
}

//生成饼图数据集对象
public static PieDataset createDataset(){
DefaultPieDataset defaultpiedataset = new DefaultPieDataset();
defaultpiedataset.setValue("管理人员",10.02D);
defaultpiedataset.setValue("市场人员",20.23D);
defaultpiedataset.setValue("开发人员",60.02D);
defaultpiedataset.setValue("OEM人员",10.02D);
defaultpiedataset.setValue("其他人员",5.11D);

return defaultpiedataset;
}

//生成图表主对象JFreeChart
public static JFreeChart createChart(PieDataset piedataset){
//定义图表对象
JFreeChart jfreechart = ChartFactory.createPieChart("CityInfoPort公司组织架构图",piedataset,true,true,false);
//获得图表显示对象
PiePlot pieplot = (PiePlot)jfreechart.getPlot();
//设置图表标签字体
pieplot.setLabelFont(new Font("SansSerif",Font.BOLD,12));
pieplot.setNoDataMessage("No data available");
pieplot.setCircular(true);
pieplot.setLabelGap(0.01D);//间距

return jfreechart;
}

//生成显示图表的面板
public static JPanel createDemoPanel(){
JFreeChart jfreechart = createChart(createDataset());
return new ChartPanel(jfreechart);
}

}

JFreeChart_web（二）

猜你喜欢