JFreeChart是一个Java开源项目,是一款优秀的Java图表生成插件,它提供了在 Java Application、Servlet和JSP下生成各种图片格式的图表,包括柱形图、饼形图、线图、区域图、时序图和多轴图等。下面是自己做了个简单的效果(ajax+servlet=柱状图)。
一. 下载 jfreechart-1.0.5.zip
官方网站:http://www.jfree.org/jfreechart/index.html
二. 解压缩jfreechart-1.0.8a.zip
三. 新建一个web项目
将解压后lib下的如下jar包导入到项目WEB/lib下
jfreechart-1.0.5.jar
jcommon-1.0.9.jar
junit.jar
gnujaxp.jar
四. 修改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>/DisplayChart</url-pattern>
</servlet-mapping>
freechart的配置就完成了,下面就可以进行jfreechart的开发了
五.新建一servlet(TestJFreeCharServlet )
package com.hao.jfreechart.servlet;
import java.awt.Color;
import java.awt.Font;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.jfree.chart.ChartFactory;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.axis.AxisLocation;
import org.jfree.chart.labels.ItemLabelAnchor;
import org.jfree.chart.labels.ItemLabelPosition;
import org.jfree.chart.labels.StandardCategoryItemLabelGenerator;
import org.jfree.chart.plot.CategoryPlot;
import org.jfree.chart.plot.PlotOrientation;
import org.jfree.chart.servlet.ServletUtilities;
import org.jfree.data.category.CategoryDataset;
import org.jfree.data.category.DefaultCategoryDataset;
import org.jfree.ui.TextAnchor;
/**
* 测试JFreeChart的ajax实现
* @author suifeng
*
*/
public class TestJFreeCharServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request,response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
String title="蔬菜比较"; // 图表标题
String disRow="Date"; // 横坐标名
String disCls="Money"; // 纵坐标名
CategoryDataset dataset = getJFreeCharDatas(); // 数据集
//画图
JFreeChart chart = getJFreeChart(title,disRow,disCls,dataset);
//将图片放到session里
HttpSession session = request.getSession(true);
String filename = ServletUtilities.saveChartAsPNG(
chart, //生成的chart
700, //图的宽度,单位是像素
400, //图的高度,单位是像素
null, //信息
session //图片生命周期
);
//将生成图片的名字返回到客户端
out.println(filename);
}
/**
* 图表的数据
* @return
*/
private CategoryDataset getJFreeCharDatas() {
DefaultCategoryDataset dataset = new DefaultCategoryDataset();
dataset.addValue(100, "白菜", "第一天");
dataset.addValue(58, "萝卜", "第一天");
dataset.addValue(130, "豆角", "第一天");
dataset.addValue(80, "白菜", "第二天");
dataset.addValue(90, "萝卜", "第二天");
dataset.addValue(20, "豆角", "第二天");
dataset.addValue(10, "白菜", "第三天");
dataset.addValue(20, "萝卜", "第三天");
dataset.addValue(100, "豆角", "第三天");
dataset.addValue(300, "白菜", "第四天");
dataset.addValue(160, "萝卜", "第四天");
dataset.addValue(180, "豆角", "第四天");
return dataset;
}
/**
* 画柱形图
* @return
*/
public JFreeChart getJFreeChart(String title,String disRow,String
disCls,CategoryDataset dataset){
//建立JFreeChart
JFreeChart chart = ChartFactory.createBarChart(
title, // 图表标题
disRow, // 目录轴的显示标签
disCls, // 数值轴的显示标签
dataset, // 数据集
PlotOrientation.VERTICAL, // 图表方向:水平、垂直
true, //是否显示图例(对于简单的柱状图必须是false,比如比较A和B,TRUE则显 示 A和B分别使用什么颜色)
false, // 是否生成工具
false // 是否生成URL链接
);
//获得图表区域对象
CategoryPlot plot = chart.getCategoryPlot();
//设置图表的纵轴和横轴org.jfree.chart.axis.CategoryAxis
org.jfree.chart.axis.CategoryAxis domainAxis =plot.getDomainAxis();
domainAxis.setLowerMargin(0.05);//设置距离图片左端距离此时为5%
domainAxis.setUpperMargin(0.05);//设置距离图片右端距离此时为5%
domainAxis.setCategoryLabelPositionOffset(5);//图表横轴与标签的距离5
domainAxis.setCategoryMargin(0.2);//横轴标签之间的距离10%
//设定柱子的属性
org.jfree.chart.axis.ValueAxis rangeAxis = plot.getRangeAxis();
rangeAxis.setUpperMargin(0.1);//最高的一个柱与图片顶端的距离(最高柱的10%)
//设置图表的颜色
org.jfree.chart.renderer.category.BarRenderer renderer;
renderer = new org.jfree.chart.renderer.category.BarRenderer();
renderer.setBaseOutlinePaint(Color.red);
renderer.setItemMargin(0.1);//组内柱子间隔为组宽的10%
// renderer.setSeriesPaint(0, new Color(80, 240, 120));//柱子的颜色
// renderer.setSeriesPaint(1, new Color(160, 240, 120));//柱子的颜色
// renderer.setSeriesPaint(2, new Color(0, 240, 120));//柱子的颜色
// renderer.setSeriesOutlinePaint(0,Color.BLACK);//柱子的边框色
// renderer.setSeriesOutlinePaint(1,Color.blue);//柱子的边框色
// renderer.setSeriesOutlinePaint(2,Color.yellow);//柱子的边框色
//显示每个柱的数值,并修改该数值的字体属性
renderer.setItemLabelGenerator(new StandardCategoryItemLabelGenerator());
renderer.setItemLabelFont(new Font("宋体",Font.CENTER_BASELINE,12));
renderer.setItemLabelPaint(Color.black);//字体为黑色
renderer.setItemLabelsVisible(true); //显示数值
//使用我们设计的效果
plot.setRenderer(renderer);
//横纵坐标的显示位置 显示在下端(柱子竖直)或左侧(柱子水平)
plot.setDomainAxisLocation(AxisLocation.BOTTOM_OR_LEFT);
//横纵坐标的显示位置 显示在下端(柱子水平)或左侧(柱子竖直)
plot.setRangeAxisLocation(AxisLocation.BOTTOM_OR_LEFT);
return chart;
}
}
六.jsp调用处理页面(index.jsp)
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<%
//图片路径
String graphURL = request.getContextPath() + "/DisplayChart?filename=" ;
%>
<head>
<title>JFreeChart的ajax实现</title
<script type="text/javascript">
var xmlhttp = false;
try {
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e) {
try {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e) {
try {
xmlhttp=new XMLHttpRequest();
}catch(e) {
alert("浏览器不支持此功能!");
}
}
}
//发送ajax请求
function getJFreeCharName(){
if(xmlhttp){
var url = "getCharName";
var param = "";
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-Length",param.length);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = callBackFun;
xmlhttp.send(param);
}
}
//处理回调结果
function callBackFun(){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
document.getElementById("imgs").style.display = "";
document.getElementById("imgs").src = document.getElementById("hidText").value + xmlhttp.responseText;
}
}
}
</script>
</head>
<body>
<h1>JFreeChart的ajax实现</h1><hr>
<input type="button" value="点击测试" id="btn_test"
οnclick="getJFreeCharName()"><p>
<input type="hidden" id="hidText" value="<%=graphURL %>">
<img src="" id="imgs" style="display:none"/>
</body>
</html>
七.配置test\WEB-INF\web.xml文件
<servlet>
<servlet-name>testJFreeChar</servlet-name>
<servlet-class>
com.hao.jfreechart.servlet.TestJFreeCharServlet
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>testJFreeChar</servlet-name>
<url-pattern>/getCharName</url-pattern>
</servlet-mapping>
八.将项目部署到tomcat,访问http://localhost:8080/test/