jFreeChart展示web图表---五分钟上手！

jf的教程己是满天飞，我就不多废话了---如果你想用又不想看那些看不懂的文档，就霸王硬上弓吧，我觉这样还快些：

 1.下面这段代码,是用以生成bar、pie、温度计、仪表盘等以及我称不上名字的一些图表；
 2.附件中有一个war包，直接布到webapps下，自己看效果；
 3.附件中的源码包是整个ec中的项目，你自己玩弄--如果不知道jf在哪里下，里面也有了。

 

 

java代码,一个输出图片的Servlet的生成模拟数据的工具类：

package cn.netjava.jFreeChart;

import java.awt.BasicStroke;
import java.awt.Color;
import java.io.IOException;

import javax.servlet.*;
import javax.servlet.http.*;

import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartUtilities;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.plot.MeterPlot;
import org.jfree.chart.plot.PlotOrientation;
import org.jfree.chart.plot.ThermometerPlot;
import org.jfree.data.Range;
import org.jfree.data.category.DefaultCategoryDataset;
import org.jfree.data.general.DefaultPieDataset;
import org.jfree.data.general.DefaultValueDataset;

/**
 * 生成jFreeChart图片的Servlet
 * @author     javaFound
 */
public class ChartServlet extends HttpServlet {
    /**
     * 根据客户端请求的图表类型chartType的值，返回对应的图表，
     */
	public void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 输出图片格式为png格式
		response.setHeader("Cache-Control", "no-cache");
		response.setContentType("image/png");
		//请求的图表类型
		String chartType = request.getParameter("chartType");
		System.out.println("请求的图表类型是 : " + chartType);
		// for export Chart:
		JFreeChart chart = null;
		if (chartType.equalsIgnoreCase("PieChart3D")) {
			// 创建pie图的数据集方法
			DefaultPieDataset data = ChartTools.getPieDataSet();
			chart = ChartFactory.createPieChart3D("这是PieChart3D图：", data, true,
					false, false);
		} else if (chartType.equalsIgnoreCase("PieChart")) {
			// 创建pie图的数据集方法
			DefaultPieDataset data = ChartTools.getPieDataSet();
			chart = ChartFactory.createPieChart("这是PieChart图：", data, true,
					false, false);
		} else if (chartType.equalsIgnoreCase("RingChart")) {
			// 创建pie图的数据集方法
			DefaultPieDataset data = ChartTools.getPieDataSet();
			chart = ChartFactory.createRingChart("这是RingChart图：", data, true,
					false, false);
		} else if (chartType.equalsIgnoreCase("BarChart3D")) {
			// 创建bar图的数据集方法
			DefaultCategoryDataset data = ChartTools.getCategoryDataset();
			// PlotOrientation.HORIZONTAL这个参数说明是水平还是垂直方向VERTICAL
			chart = ChartFactory.createBarChart3D("这是BarChart3D", "数量", "地点",
					data, PlotOrientation.VERTICAL, true, false, false);
		} else if (chartType.equalsIgnoreCase("LineChart")) {
			// 创建线图
			DefaultCategoryDataset data = ChartTools.getCategoryDataset();
			chart = ChartFactory.createLineChart("这是LineChart", "数量", "地点",
					data, PlotOrientation.VERTICAL, true, false, false);
		} else if (chartType.equalsIgnoreCase("AreaChart")) {
			// 创建区域形图
			DefaultCategoryDataset data = ChartTools.getCategoryDataset();
			chart = ChartFactory.createAreaChart("这是AreaChart", "数量", "地点",
					data, PlotOrientation.VERTICAL, true, false, false);
		} else if (chartType.equalsIgnoreCase("WaterfallChart")) {
			// 搞不明白这是什么图:(
			DefaultCategoryDataset data = ChartTools.getCategoryDataset();
			chart = ChartFactory.createWaterfallChart("这是WaterfallChart", "数量",
					"地点", data, PlotOrientation.VERTICAL, true, false, false);
		} else if (chartType.equalsIgnoreCase("Thermometer")) {
			// 整个温度计。。。。。。。。。。
			// 数据集，初始值为0
			DefaultValueDataset valuedataset = new DefaultValueDataset(0);
			// 创建漫度计的Plot对象
			ThermometerPlot thermometerplot = new ThermometerPlot(valuedataset);
			chart = new JFreeChart("设备温度", JFreeChart.DEFAULT_TITLE_FONT,
					thermometerplot, false);
			thermometerplot.setThermometerStroke(new BasicStroke(2.0F));
			// 图表的轮廓颜色
			thermometerplot.setThermometerPaint(Color.BLUE);
			thermometerplot.setOutlinePaint(null);
			// 图表计数单位
			thermometerplot.setUnits(10);
			// 数值范围
			thermometerplot.setRange(-40, 40);
			thermometerplot.setForegroundAlpha(1f);
			// 图表的当前值
			valuedataset.setValue(20);
		} else if (chartType.equalsIgnoreCase("MeterChart")) {
			// 整个仪表盘
			// 数据集，初始值为30
			DefaultValueDataset valuedataset = new DefaultValueDataset(30);
			// 创建Plot对象
			MeterPlot meterplot = new MeterPlot(valuedataset);
			chart = new JFreeChart("当前流量速度", JFreeChart.DEFAULT_TITLE_FONT,
					meterplot, false);
			// 表盘上显示的数据单位说明
			meterplot.setUnits("条/秒）");
			// 表盘分害的单位，即30为一格
			meterplot.setTickSize(30);
			// 显示数据范围，0~600
			meterplot.setRange(new Range(0, 600));
			// 图表的当前值
			valuedataset.setValue(100);
		}
		if (null != chart) {
			// 将图片对象输出到客户端
			java.io.OutputStream ous = response.getOutputStream();
			ChartUtilities.writeChartAsPNG(ous, chart, 500, 300);
			// 使用这样的代码输出可能会出错！
			// ChartUtilities.writeChartAsJPEG(ous,100,chart,500,300,null);
			ous.flush();
			ous.close();
			System.out.println("******ho ho..*****图片输出完毕....... " + chartType);
		}
	}
}

/**
 * 生成图片数据集的工具类:
 * @author    javaFound
 */
class ChartTools {
	/**
	 * 生成bar图的数据集:
	 * @return:可用于Bar图的数据集
	 */
	public static DefaultCategoryDataset getCategoryDataset() {
		DefaultCategoryDataset dataset = new DefaultCategoryDataset();
		for (int series = 0; series < seriesTimes.length; series++) {
			for (int i = 0; i < seriesNames.length; i++) {
				nameValueOfTime[series][i] = new java.util.Random()
						.nextInt(300) + 100;
				dataset.addValue(nameValueOfTime[series][i], seriesNames[i],
						seriesTimes[series]);
			}
		}
		return dataset;
	}

	/**
	 * 创建用于填充pie图的数据集
	 * @return DefaultPieDataset对象
	 */
	public static DefaultPieDataset getPieDataSet() {
		// 用来填充pie图的数据集
		DefaultPieDataset dataset = new DefaultPieDataset();
		// 饼图分块名字
		String[] seriesNames = { "芙蓉路", "八一路", "五一路", "大学路", };
		for (int i = 0; i < seriesNames.length; i++) {
			int value = new java.util.Random().nextInt(1000) + 500;
			// 设置pie数据集中的数据对
			dataset.setValue(seriesNames[i], value);
		}
		return dataset;
	}
  
	private ChartTools(){};
	/** X轴时间维数据序型(当然也可以为标签维度)* */
	private static String[] seriesTimes = { "一月", "二月", "三月", "四月", "五月", "六月","七月" };
	/** 柱状标签序列(比如做为地点序列) */
	private static String[] seriesNames = { "芙蓉路立交桥", "五一立交桥", "长岭路口" };
	/** 每个时间点上每个地区/类型序列的值 */
	private static int[][] nameValueOfTime = new int[seriesTimes.length][seriesNames.length];
}

 

 

 

当然，少不了在页面上显示的一个jsp文件,名字叫做viewChart.jsp：

 

 

<%@page contentType="text/html" pageEncoding="GBK"%>
<title>jFreeChart图表测试 @NetJava.cn</title>
<br>请选择要生成的图表类型:
<hr>
<select id="scType" onchange="loadChartBySelectType(this)">
<option value="1">请选择一种图表</option>
<option value="PieChart3D">PieChart3D</option>
<option value="PieChart">PieChart</option>
<option value="BarChart3D">BarChart3D</option>
<option value="LineChart">LineChart</option>
<option value="RingChart">RingChart</option>
<option value="AreaChart">AreaChart</option>
<option value="WaterfallChart">WaterfallChart</option>
<option value="Thermometer">Thermometer</option>
<option value="MeterChart">MeterChart</option>
</select>
 <hr>
图表:
<div id="displayChart" />
 
 <script type="text/javascript">
/**选择jf图表类型时，载入图片*/
function loadChartBySelectType(sua) {
    var cType=sua.value;
    if(cType=="1"){
     return ;
    }
    alert("选中的是: "+cType)
     var disabledImageZone=document.getElementById("displayChart");
    //这样多简单,清理div中己有的东东:)
       disabledImageZone.innerHTML="";
      var imageZone = document.createElement('img');
      imageZone.setAttribute('id','imageZone');
      //提取服务器上的图片显示下来:
      imageZone.setAttribute('src',"servlet/ChartServlet?chartType="+cType);
      disabledImageZone.appendChild(imageZone);
      }
      </script>

 

就贴其中一张图了，是个温度计，哈哈：

 

 

评论

6 楼 一剑飘红007 2013-06-08  

正在使用，谢谢

5 楼 ddh9504 2008-07-02  

警戒线可以玩不咯，满哥

4 楼 ddh9504 2008-07-02  

收到，谢谢，不错！

3 楼 lxl686 2008-04-06  

   我的也显示不出来,在IE6.0里面.  我把它部署在weblogic里面跑的..页面能够加载,但是选择后脚本就出错啦!

2 楼 javafound 2008-03-13  

不会吧，我刚试了的，是不是你在FF上试的？
  换IE试下，可能是我的js不标准。

1 楼 yuanjie_1983 2008-03-13  

楼主的代码确实不错！我将你的WAR文件下载以后部署到TOMCAT的WEBAPPS目录下启动服务，可以正常运行，但是生成的图片确显示不出来？生成的图片显示一个x符号 不知道是什么原因？