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图的数据集方—efaultPieDataset data = ChartTools.getPieDataSet();chart = ChartFactory.createPieChart3D("这是PieChart3D图：", data, true,false, false);} else if (chartType.equalsIgnoreCase("PieChart")) {// 创建pie图的数据集方—efaultPieDataset data = ChartTools.getPieDataSet();chart = ChartFactory.createPieChart("这是PieChart图：", data, true,false, false);} else if (chartType.equalsIgnoreCase("RingChart")) {// 创建pie图的数据集方—efaultPieDataset data = ChartTools.getPieDataSet();chart = ChartFactory.createRingChart("这是RingChart图：", data, true,false, false);} else if (chartType.equalsIgnoreCase("BarChart3D")) {// 创建bar图的数据集方—efaultCategoryDataset data = ChartTools.getCategoryDataset();// PlotOrientation.HORIZONTAL这个参数说明是水平还是垂直方向VERTICALchart = 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")) {// 整个温度计。。。。。。。。。。// 数据集，初始值为0DefaultValueDataset 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")) {// 整个仪表盘// 数据集，初始值为30DefaultValueDataset 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~600meterplot.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>

?

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

?

?

不会吧，我刚试了的，是不是你在FF上试的？
换IE试下，可能是我的js不标准。 3 楼 lxl686 2008-04-06 我的也显示不出来,在IE6.0里面. 我把它部署在weblogic里面跑的..页面能够加载,但是选择后脚本就出错啦! 4 楼 ddh9504 2008-07-02 收到，谢谢，不错！ 5 楼 ddh9504 2008-07-02 警戒线可以玩不咯，满哥