JFreeChart_web(二)
JFreeChart个人认为最出色的还是在web中的应用,很多时候我们直接在JSP页面生成统计图。
个人认为,JFreeChart作为web应用比Application应用强大的就是和用户的互动显示。
为了更好的解耦,JFreeChart提供了一个名为“DisplayChart”的servlet。我们要在web.xml中配置DisplayChart 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>/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 :
- <?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:
- <!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:
- <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
- <%@ 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);
}
}