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_web