基于MVC的JFreeChart图表（一）

Spring +Spring MVC +JFreeChart+Maven 生成Web图表

1、环境搭建

使用Maven 引导jar包，搭建环境。项目采用MVC框架，将生成的图片发送到JSP页面上。最近项目里面有用到需要使用图表工具，准备先入手JFreeChart，上手快，后期如果还有用到，考虑使用其他的图表工具。

1.1 pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">  <modelVersion>4.0.0</modelVersion>  <groupId>com.chenhuan</groupId>  <artifactId>jfreechart</artifactId>  <packaging>war</packaging>  <version>0.0.1-SNAPSHOT</version>  <name>jfreechart Maven Webapp</name>  <url>http://maven.apache.org</url>  <dependencies>    <!-- https://mvnrepository.com/artifact/jfree/jfreechart --><dependency>    <groupId>jfree</groupId>    <artifactId>jfreechart</artifactId>    <version>1.0.13</version></dependency><!-- https://mvnrepository.com/artifact/org.springframework/spring-core --><dependency>    <groupId>org.springframework</groupId>    <artifactId>spring-core</artifactId>    <version>4.3.3.RELEASE</version></dependency><!-- https://mvnrepository.com/artifact/org.springframework/spring-jdbc --><dependency>    <groupId>org.springframework</groupId>    <artifactId>spring-jdbc</artifactId>    <version>4.3.3.RELEASE</version></dependency><!-- https://mvnrepository.com/artifact/org.springframework/spring-web --><dependency>    <groupId>org.springframework</groupId>    <artifactId>spring-web</artifactId>    <version>4.3.3.RELEASE</version></dependency> <dependency>            <groupId>org.springframework</groupId>            <artifactId>spring-webmvc</artifactId>            <version>4.3.3.RELEASE</version>        </dependency> <dependency>            <groupId>org.springframework</groupId>            <artifactId>spring-aspects</artifactId>            <version>4.3.3.RELEASE</version>        </dependency> <dependency>            <groupId>org.springframework</groupId>            <artifactId>spring-orm</artifactId>            <version>4.3.3.RELEASE</version>        </dependency>        <dependency>            <groupId>commons-pool</groupId>            <artifactId>commons-pool</artifactId>            <version>1.6</version>        </dependency><!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api --><dependency>    <groupId>javax.servlet</groupId>    <artifactId>javax.servlet-api</artifactId>    <version>3.1.0</version></dependency><!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc-portlet --><dependency>    <groupId>org.springframework</groupId>    <artifactId>spring-webmvc-portlet</artifactId>    <version>4.3.3.RELEASE</version></dependency><!-- https://mvnrepository.com/artifact/javax.servlet/jstl --><dependency>    <groupId>javax.servlet</groupId>    <artifactId>jstl</artifactId>    <version>1.2</version></dependency><!-- https://mvnrepository.com/artifact/taglibs/standard --><dependency>    <groupId>taglibs</groupId>    <artifactId>standard</artifactId>    <version>1.1.2</version></dependency>    <dependency>      <groupId>junit</groupId>      <artifactId>junit</artifactId>      <version>4.9</version>    </dependency>  </dependencies>  <build>    <finalName>jfreechart</finalName>     <plugins>   <plugin>    <groupId>org.apache.tomcat.maven</groupId>    <artifactId>tomcat7-maven-plugin</artifactId>    <version>2.2</version>    <configuration>        <!-- 注意此处的url -->        <url> http://localhost:8080/manager/text</url>        <server>tomcat7</server> <!-- 此处的名字必须和setting.xml中配置的ID一致-->        <username>admin</username>          <password>admin</password>          <source>1.7</source>          <target>1.7</target>          <encoding>UTF-8</encoding>        <ignorePackaging>true</ignorePackaging>         <path>/jfreechart</path> <!-- 此处的名字是项目发布的工程名-->    </configuration></plugin>    </plugins>  </build>    <properties>      <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>      <maven.compiler.encoding>UTF-8</maven.compiler.encoding>  </properties>  </project>

1.2 web.xml

<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    xmlns="http://java.sun.com/xml/ns/javaee"    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"    id="WebApp_ID" version="3.0">    <!-- 解决中文乱码问题 -->    <filter>        <filter-name>CharacterEncodingFilter</filter-name>        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>        <init-param>            <param-name>encoding</param-name>            <param-value>UTF-8</param-value>        </init-param>        <init-param>            <param-name>forceEncoding</param-name>            <param-value>true</param-value>        </init-param>    </filter>    <filter-mapping>        <filter-name>CharacterEncodingFilter</filter-name>        <url-pattern>/*</url-pattern>    </filter-mapping>    <servlet>        <servlet-name>appServlet</servlet-name>        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>        <init-param>            <param-name>contextConfigLocation</param-name>            <param-value>/WEB-INF/appServlet-context.xml</param-value>        </init-param>        <load-on-startup>1</load-on-startup> <!-- 启动时加载 -->    </servlet>    <servlet-mapping>        <servlet-name>appServlet</servlet-name> <!-- url映射 -->        <url-pattern>/</url-pattern> <!-- 拦截器，拦截所有 -->    </servlet-mapping>     <servlet-mapping>            <servlet-name>default</servlet-name>            <url-pattern>*.jpg</url-pattern>        </servlet-mapping>         <servlet-mapping>            <servlet-name>default</servlet-name>            <url-pattern>*.PNG</url-pattern>        </servlet-mapping>         <servlet-mapping>            <servlet-name>default</servlet-name>            <url-pattern>*.JPEG</url-pattern>        </servlet-mapping>      <!-- 针对JfreeChart的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></web-app>

1.3 appServlet-context.xml

<?xml version="1.0" encoding="UTF-8"?><beans:beans xmlns:beans="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"    xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:p="http://www.springframework.org/schema/p"    xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd ">            <mvc:annotation-driven /><!-- ①：对web包中的所有类进行扫描，以完成Bean创建和自动依赖注入的功能 -->    <context:component-scan base-package="com.cqu.controller" />        <!-- 这两个类用来启动基于Spring MVC的注解功能，将控制器与方法映射加入到容器中 -->    <beans:bean        class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping" />    <beans:bean        class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" />    <!-- 这个类用于Spring MVC视图解析 -->    <beans:bean id="viewResolver"        class="org.springframework.web.servlet.view.InternalResourceViewResolver">        <beans:property name="prefix" value="/WEB-INF/pages/" />        <beans:property name="suffix" value=".jsp" />    </beans:bean></beans:beans>

2、 java代码及界面

2.1 controller代码

controller中有三个图表，分别是柱状图，饼状图和仪表图。在jsp页面中通过点击不同的链接可以在页面中查看生成的相应的图片。这部分代码都是来源与别人的博客，我只是做了整合。
ChartController_split.java

@Controller  public class ChartController_split {     // @RequestMapping("/resultmap")       public String resultmap(){          return "/resultmap";      }          此处可以选择性的加入下面的三个图表代码    }

---

2.1.1 显示柱状图

  @RequestMapping(value = "/getColumnChart")      public ModelAndView getColumnChart(HttpServletRequest request,HttpServletResponse response, ModelMap modelMap) throws Exception{          //1. 获得数据集合          CategoryDataset dataset = getDataSet();          //2. 创建柱状图          JFreeChart chart = ChartFactory.createBarChart3D("学生对教师授课满意度", // 图表标题                  "课程名", // 目录轴的显示标签                  "百分比", // 数值轴的显示标签                  dataset, // 数据集                  PlotOrientation.VERTICAL, // 图表方向：水平、垂直                  false, // 是否显示图例(对于简单的柱状图必须是false)                  false, // 是否生成工具                  false // 是否生成URL链接                  );          //3. 设置整个柱状图的颜色和文字（char对象的设置是针对整个图形的设置）          chart.setBackgroundPaint(ChartColor.WHITE); // 设置总的背景颜色          //4. 获得图形对象，并通过此对象对图形的颜色文字进行设置          CategoryPlot p = chart.getCategoryPlot();// 获得图表对象          p.setBackgroundPaint(ChartColor.lightGray);//图形背景颜色          p.setRangeGridlinePaint(ChartColor.WHITE);//图形表格颜色          //5. 设置柱子宽度          BarRenderer renderer = (BarRenderer)p.getRenderer();          renderer.setMaximumBarWidth(0.06);          //解决乱码问题          getChartByFont(chart);          //6. 将图形转换为图片，传到前台          String fileName = ServletUtilities.saveChartAsPNG(chart, 700, 400, null, request.getSession());          //生成URL，用于请求        String chartURL=request.getContextPath() + "/DisplayChart?filename="+fileName;          modelMap.put("chartURL", chartURL);          //请求URL时，将URL返回到指定的JSP页面        return new ModelAndView("resultmap",modelMap);      }    //设置文字样式      private static void getChartByFont(JFreeChart chart) {          //1. 图形标题文字设置          TextTitle textTitle = chart.getTitle();             textTitle.setFont(new Font("宋体",Font.BOLD,20));          //2. 图形X轴坐标文字的设置          CategoryPlot plot = (CategoryPlot) chart.getPlot();          CategoryAxis axis = plot.getDomainAxis();          axis.setLabelFont(new Font("宋体",Font.BOLD,22));  //设置X轴坐标上标题的文字          axis.setTickLabelFont(new Font("宋体",Font.BOLD,15));  //设置X轴坐标上的文字        //2. 图形Y轴坐标文字的设置          ValueAxis valueAxis = plot.getRangeAxis();          valueAxis.setLabelFont(new Font("宋体",Font.BOLD,15));  //设置Y轴坐标上标题的文字          valueAxis.setTickLabelFont(new Font("sans-serif",Font.BOLD,12));//设置Y轴坐标上的文字      }      // 获取一个演示用的组合数据集对象 ;可以使用模拟的数据集，也可以采用数据库返回的数据集，通过控制器将模型的数据传送到视图层    private static CategoryDataset getDataSet() {          DefaultCategoryDataset dataset = new DefaultCategoryDataset();          dataset.addValue(40, "", "普通动物学");          dataset.addValue(50, "", "生物学");          dataset.addValue(60, "", "动物解剖学");          dataset.addValue(70, "", "生物理论课");          dataset.addValue(80, "", "动物理论课");          return dataset;      }  

2.1.2 显示饼状图

 //显示饼状图    @RequestMapping(value="getPieChart")    public ModelAndView getPieChart(HttpServletRequest request,HttpServletResponse response, ModelMap modelMap) throws Exception{              DefaultPieDataset dpd = new DefaultPieDataset();            dpd.setValue("管理人员", 25);            dpd.setValue("市场人员", 25);            dpd.setValue("开发人员", 45);            dpd.setValue("其他", 10);            //创建主题样式             StandardChartTheme standardChartTheme=new StandardChartTheme("CN");             //设置标题字体             standardChartTheme.setExtraLargeFont(new Font("隶书",Font.BOLD,20));             //设置图例的字体             standardChartTheme.setRegularFont(new Font("宋书",Font.PLAIN,15));             //设置轴向的字体             standardChartTheme.setLargeFont(new Font("宋书",Font.PLAIN,15));             //应用主题样式             ChartFactory.setChartTheme(standardChartTheme);          JFreeChart chart = ChartFactory.createPieChart("某公司组织结构图",dpd, true, false, false);        chart.setBackgroundPaint(Color.white);        String fileName = ServletUtilities.saveChartAsPNG(chart,600,400,request.getSession());         //ServletUtilities是面向web开发的工具类，返回一个字符串文件名,文件名自动生成，生成好的图片会自动放在服务器（tomcat）的临时文件下（temp）        String PieURL = request.getContextPath() + "/DisplayChart?filename=" + fileName;        //根据文件名去临时目录下寻找该图片，这里的/DisplayChart路径要与配置文件里用户自定义的<url-pattern>一致        modelMap.put("PieURL", PieURL);        return new ModelAndView("resultmap",modelMap);     }

2.1.3 显示仪表盘

    //显示仪表图    @RequestMapping(value="getMeterChart")    public ModelAndView getMeterChart(HttpServletRequest request,HttpServletResponse response, ModelMap modelMap) throws Exception{             //1,数据集合对象 此处为DefaultValueDataset          DefaultValueDataset dataset = new DefaultValueDataset();          //  当前指针指向的位置，即：我们需要显示的数据          dataset.setValue(new Double(60D));          /**          *  获取图表区域对象          *          * A. setDataSet(int index, DataSet dataSet);          * 为表盘设定使用的数据集，通常一个表盘上可能存在多个指针，          * 因此需要制定该数据集与哪个指针相互关联。          * 可以将指针想象成数据集的一种体现方式。          */          DialPlot dialplot = new DialPlot();          dialplot.setView(0.0D, 0.0D, 1.0D, 1.0D);          dialplot.setDataset(0,dataset);          /**          * 开始设置显示框架结构          * B. setDailFrame(DailFrame dailFrame);设置表盘的底层面板图像，通常表盘是整个仪表的最底层。          */          DialFrame dialframe =new StandardDialFrame();          dialplot.setDialFrame(dialframe);          /**          * 结束设置显示框架结构          * C. setBackground(Color color);设置表盘的颜色，可以采用Java内置的颜色控制方式来调用该方法。          */          GradientPaint gradientpaint = new GradientPaint(new Point(), new Color(255, 255, 255), new Point(), new Color(170, 170, 220));          DialBackground dialbackground = new DialBackground(gradientpaint);          dialbackground.setGradientPaintTransformer(new StandardGradientPaintTransformer(GradientPaintTransformType.VERTICAL));          dialplot.setBackground(dialbackground);          //  设置显示在表盘中央位置的信息          DialTextAnnotation dialtextannotation = new DialTextAnnotation("温度");          dialtextannotation.setFont(new Font("Dialog", 1, 14));          dialtextannotation.setRadius(0.69999999999999996D);          dialplot.addLayer(dialtextannotation);          DialValueIndicator dialvalueindicator = new DialValueIndicator(0);          dialplot.addLayer(dialvalueindicator);          //  根据表盘的直径大小（0.75），设置总刻度范围          /**          * E. addScale(int index, DailScale dailScale);          * 用于设定表盘上的量程，index指明该量程属于哪一个指针所指向的数据集，          * DailScale指明该量程的样式，如量程的基本单位等信息。          *          * StandardDialScale(double lowerBound, double upperBound, double startAngle,          * double extent, double majorTickIncrement, int minorTickCount)          * new StandardDialScale(-40D, 60D, -120D, -300D,30D);          */          //          StandardDialScale standarddialscale =new StandardDialScale();          standarddialscale.setLowerBound(0D);          standarddialscale.setUpperBound(100D);          standarddialscale.setStartAngle(-120D);          standarddialscale.setExtent(-300D);          standarddialscale.setTickRadius(0.88D);          standarddialscale.setTickLabelOffset(0.14999999999999999D);          standarddialscale.setTickLabelFont(new Font("Dialog", 0, 14));          dialplot.addScale(0, standarddialscale);          /**          * F. addLayer(DailRange dailRange);          * 用于设定某一特定量程的特殊表现，通常位于量程之下，如红色范围标注，绿色范围标注等。          * 在调用该方法之前需要设定DailRange的一些信息，包括位置信息，颜色信息等等。          */          //设置刻度范围（红色）          StandardDialRange standarddialrange = new StandardDialRange(0D, 60D, Color.red);          standarddialrange.setInnerRadius(0.52000000000000002D);          standarddialrange.setOuterRadius(0.55000000000000004D);          dialplot.addLayer(standarddialrange);          //设置刻度范围（橘黄色）                     StandardDialRange standarddialrange1 = new StandardDialRange(60D, 80D, Color.orange);          standarddialrange1.setInnerRadius(0.52000000000000002D);          standarddialrange1.setOuterRadius(0.55000000000000004D);          dialplot.addLayer(standarddialrange1);          //设置刻度范围（绿色）                         StandardDialRange standarddialrange2 = new StandardDialRange(80D, 100D, Color.green);          standarddialrange2.setInnerRadius(0.52000000000000002D);          standarddialrange2.setOuterRadius(0.55000000000000004D);          dialplot.addLayer(standarddialrange2);          /**          * 设置指针          * G. addPointer(DailPointer dailPointer);          * 用于设定表盘使用的指针样式，JFreeChart中有很多可供选择指针样式，          * 用户可以根据使用需要，采用不同的DailPoint的实现类来调用该方法          */          Pointer pointer = new Pointer(); //内部内          dialplot.addPointer(pointer); //addLayer(pointer);          /**          * 实例化DialCap          * H. setCap(DailCap dailCap);设定指针上面的盖帽的样式。          */          DialCap dialcap = new DialCap();          dialcap.setRadius(0.10000000000000001D);          dialplot.setCap(dialcap);          //生成chart对象          JFreeChart jfreechart = new JFreeChart(dialplot);          //设置标题          jfreechart.setTitle("设备取水温度采样");          ChartFrame frame = new ChartFrame("CityInfoPort公司组织架构图 ", jfreechart,true);          String fileName =ServletUtilities.saveChartAsPNG(jfreechart,600,400, request.getSession());        String MeterURL = request.getContextPath() + "/DisplayChart?filename=" + fileName;        modelMap.put("MeterURL", MeterURL);        return new ModelAndView("resultmap",modelMap);     }

2.2 一张图片包含多个饼状图

2.2.1 MutilChartController .java

package com.cqu.controller;import java.awt.Font;import java.text.DecimalFormat;import java.text.NumberFormat;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.jfree.chart.ChartFactory;import org.jfree.chart.ChartRenderingInfo;import org.jfree.chart.JFreeChart;import org.jfree.chart.StandardChartTheme;import org.jfree.chart.entity.StandardEntityCollection;import org.jfree.chart.labels.StandardPieSectionLabelGenerator;import org.jfree.chart.plot.MultiplePiePlot;import org.jfree.chart.plot.PiePlot;import org.jfree.chart.servlet.ServletUtilities;import org.jfree.data.category.DefaultCategoryDataset;import org.jfree.util.TableOrder;import org.springframework.stereotype.Controller;import org.springframework.ui.ModelMap;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.servlet.ModelAndView;@Controllerpublic class MutilChartController {    @RequestMapping(value="/getMutilChart")    public ModelAndView mutilChart(HttpServletRequest request,HttpServletResponse response, ModelMap modelMap) throws Exception {        String checkInType[] = { "出勤", "病假", "事假", "其他" };        String clazzs[] = { "JSD1208班", "JSD1209班", "JSD1210班", "JSD1211班" };        String chartTitle = "各班级出勤情况";        //创建主题样式          StandardChartTheme standardChartTheme=new StandardChartTheme("CN");          //设置标题字体          standardChartTheme.setExtraLargeFont(new Font("隶书",Font.BOLD,20));          //设置图例的字体          standardChartTheme.setRegularFont(new Font("宋书",Font.PLAIN,15));          //设置轴向的字体          standardChartTheme.setLargeFont(new Font("宋书",Font.PLAIN,15));          //应用主题样式          ChartFactory.setChartTheme(standardChartTheme);           // 创建数据集        DefaultCategoryDataset dataset = new DefaultCategoryDataset();        // 构建数据        int checkInData;        for (int i = 0; i < checkInType.length; i++) {        for (int j = 0; j < clazzs.length; j++) {        checkInData = 1 + (int) (Math.random() * 1000);        dataset.addValue(checkInData, checkInType[i], clazzs[j]);        }        }        // 获取JFreeChart对象        JFreeChart  chart = ChartFactory.createMultiplePieChart(        chartTitle, // 图表标题        dataset, // 数据集        TableOrder.BY_COLUMN, // 指定被提取数据的顺序        false, // 是否包含图例        true, // 是否包含提示工具        false // 是否包含url        );        // 获取PiePlot对象        MultiplePiePlot multiPlot = (MultiplePiePlot) chart.getPlot();        JFreeChart obj = multiPlot.getPieChart();        PiePlot plot = (PiePlot) obj.getPlot();          //设置标签格式        plot.setLabelGenerator(new StandardPieSectionLabelGenerator("{0} = {1} ({2})", NumberFormat.getNumberInstance(),                        new DecimalFormat("0.00%")));        // 分离圆弧        for (int i = 0; i < clazzs.length; i++) {        //plot.setExplodePercent(i, 0.03D);            plot.setExplodePercent("two", 0.3d);        }        ChartRenderingInfo info = new ChartRenderingInfo(        new StandardEntityCollection());         String fileName = ServletUtilities.saveChartAsPNG(chart,1000,800,request.getSession());           String MutilChart = request.getContextPath() + "/DisplayChart?filename=" + fileName;          modelMap.put("MutilChart", MutilChart);        return new ModelAndView("resultmap",modelMap);         }}

2.3 最后是JSP页面

2.3.1 resultmap.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  <%  String path = request.getContextPath();  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  %>  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <html>   <head>     <base href="<%=basePath%>">   </head>    <body>        <div  style="text-align:center">             jfreechart _图表<br><br>            点击显示柱状图<a href="getColumnChart">getColumnChart</a><br>           点击显示饼状图<a href="getPieChart" >getPieChart</a><br>           点击显示仪表图<a href="getMeterChart" >getMeterChart</a><br>             点击显示多状图<a href="getMutilChart" >getMutiPieChart</a><br>         <br><br>           <img src="${chartURL}"  width=600 height=400  border=0  color=gray >           <img src="${PieURL}"  width=600 height=400  border=0  color=gray>            <img src="${MeterURL}"  width=600 height=400  border=0  color=gray>             <img src="${MutilChart}"  width=1000 height=800  border=0  color=gray>         </div>    </body>  </html>  

3 项目文件包

3.1 jfreechart.war

本项目没有使用数据库，所以直接将jfreechart.war放在Tomcat 的webapps路径下就可以运行了，请求路径为：http://localhost:8080/jfreechart/resultmap
jfreechart.war 的下载地址为：Jfreechart.war下载

3.2 jfreechart 完整打包

包含整个文件所需要的文件。不过，要配置maven才能运行起来。下载地址为：Jfreechart项目