雖然如今JS作報表和圖形展現已經很是廣泛和漂亮了,可是不能忽略有jfreechart 這樣一種東西!html
這些翻閱資料,在看之前寫的示例時發現了關於jfreechart 的簡單示例,無論怎樣發上來分享一下!java
這個示例使用JSP和Servlet作後臺和前臺展現,下面有源代碼能夠直接運行!web
生產線型趨勢圖:sql
package com.xidian.servlet; import java.awt.Color; import java.awt.Font; import java.io.*; import java.text.SimpleDateFormat; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.jfree.chart.*; import org.jfree.chart.axis.DateAxis; import org.jfree.chart.axis.ValueAxis; import org.jfree.chart.plot.XYPlot; import org.jfree.chart.renderer.xy.XYItemRenderer; import org.jfree.chart.renderer.xy.XYLineAndShapeRenderer; import org.jfree.chart.title.TextTitle; import org.jfree.data.time.Day; import org.jfree.data.time.TimeSeries; import org.jfree.data.time.TimeSeriesCollection; import org.jfree.data.xy.XYDataset; /** * 生產線型趨勢圖 * @說明 * @author cuisuqiang * @version 1.0 * @since */ @SuppressWarnings("serial") public class LineServlet extends HttpServlet { @SuppressWarnings("deprecation") @Override protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); // 在Mysql中使用 select // year(accessdate),month(accessdate),day(accessdate),count(*) // 其中accessdate 是一個date類型的時間 // 時間序列對象集合 TimeSeriesCollection chartTime = new TimeSeriesCollection(); // 時間序列對象,第1個參數表示時間序列的名字,第2個參數是時間類型,這裏爲天 // 該對象用於保存前count天天天的訪問次數 TimeSeries timeSeries = new TimeSeries("日訪問", Day.class); // 爲了演示,直接拼裝數據 // Day的組裝格式是day-month-year 訪問次數 timeSeries.add(new Day(1, 1, 2010), 50); timeSeries.add(new Day(2, 1, 2010), 47); timeSeries.add(new Day(3, 1, 2010), 82); timeSeries.add(new Day(4, 1, 2010), 95); timeSeries.add(new Day(5, 1, 2010), 104); timeSeries.add(new Day(6, 1, 2010), 425); chartTime.addSeries(timeSeries); XYDataset date = chartTime; try { // 使用ChartFactory來建立時間序列的圖表對象 JFreeChart chart = ChartFactory.createTimeSeriesChart( "網站天天訪問統計", // 圖形標題 "日期", // X軸說明 "訪問量", // Y軸說明 date, // 數據 true, // 是否建立圖例 true, // 是否生成Tooltips false // 是否生產URL連接 ); // 設置整個圖片的背景色 chart.setBackgroundPaint(Color.PINK); // 設置圖片有邊框 chart.setBorderVisible(true); // 得到圖表區域對象 XYPlot xyPlot = (XYPlot) chart.getPlot(); // 設置報表區域的背景色 xyPlot.setBackgroundPaint(Color.lightGray); // 設置橫 縱座標網格顏色 xyPlot.setDomainGridlinePaint(Color.GREEN); xyPlot.setRangeGridlinePaint(Color.GREEN); // 設置橫、縱座標交叉線是否顯示 xyPlot.setDomainCrosshairVisible(true); xyPlot.setRangeCrosshairVisible(true); // 得到數據點(X,Y)的render,負責描繪數據點 XYItemRenderer xyItemRenderer = xyPlot.getRenderer(); if (xyItemRenderer instanceof XYLineAndShapeRenderer) { XYLineAndShapeRenderer xyLineAndShapeRenderer = (XYLineAndShapeRenderer) xyItemRenderer; xyLineAndShapeRenderer.setShapesVisible(true); // 數據點可見 xyLineAndShapeRenderer.setShapesFilled(true); // 數據點是實心點 xyLineAndShapeRenderer.setSeriesFillPaint(0, Color.RED); // 數據點填充爲藍色 xyLineAndShapeRenderer.setUseFillPaint(true);// 將設置好的屬性應用到render上 } // 配置如下內容方可解決亂碼問題 // 配置字體 Font xfont = new Font("宋體", Font.PLAIN, 12); // X軸 Font yfont = new Font("宋體", Font.PLAIN, 12); // Y軸 Font kfont = new Font("宋體", Font.PLAIN, 12); // 底部 Font titleFont = new Font("宋體", Font.BOLD, 25); // 圖片標題 // 圖片標題 chart.setTitle(new TextTitle(chart.getTitle().getText(), titleFont)); // 底部 chart.getLegend().setItemFont(kfont); // X 軸 ValueAxis domainAxis = xyPlot.getDomainAxis(); domainAxis.setLabelFont(xfont);// 軸標題 domainAxis.setTickLabelFont(xfont);// 軸數值 domainAxis.setTickLabelPaint(Color.BLUE); // 字體顏色 // Y 軸 ValueAxis rangeAxis = xyPlot.getRangeAxis(); rangeAxis.setLabelFont(yfont); rangeAxis.setLabelPaint(Color.BLUE); // 字體顏色 rangeAxis.setTickLabelFont(yfont); // 定義座標軸上日期顯示的格式 DateAxis dateAxis = (DateAxis) xyPlot.getDomainAxis(); // 設置日期格式 dateAxis.setDateFormatOverride(new SimpleDateFormat("yyyy-MM-dd")); // 向客戶端輸出生成的圖片 ChartUtilities.writeChartAsJPEG(response.getOutputStream(), 1.0f, chart, 500, 300, null); } catch (Exception e) { e.printStackTrace(); } } }
生產柱狀圖:數據庫
package com.xidian.servlet; import java.awt.Color; import java.awt.Font; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.jfree.chart.ChartFactory; import org.jfree.chart.ChartUtilities; import org.jfree.chart.JFreeChart; import org.jfree.chart.axis.CategoryAxis; import org.jfree.chart.axis.NumberAxis; import org.jfree.chart.plot.CategoryPlot; import org.jfree.chart.plot.PlotOrientation; import org.jfree.chart.renderer.category.BarRenderer; import org.jfree.chart.title.TextTitle; import org.jfree.data.category.DefaultCategoryDataset; /** * 生產柱狀圖 * @說明 * @author cuisuqiang * @version 1.0 * @since */ @SuppressWarnings("serial") public class PillarServlet extends HttpServlet { @Override protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); // 使用普通數據集 DefaultCategoryDataset chartDate = new DefaultCategoryDataset(); // 增長測試數據,第一個參數是訪問量,最後一個是時間,中間是顯示用不考慮 chartDate.addValue(55, "訪問量", "2010-01"); chartDate.addValue(65, "訪問量", "2010-02"); chartDate.addValue(59, "訪問量", "2010-03"); chartDate.addValue(156, "訪問量", "2010-04"); chartDate.addValue(452, "訪問量", "2010-05"); chartDate.addValue(359, "訪問量", "2010-06"); try { // 從數據庫中得到數據集 DefaultCategoryDataset data = chartDate; // 使用ChartFactory建立3D柱狀圖,不想使用3D,直接使用createBarChart JFreeChart chart = ChartFactory.createBarChart3D( "網站月訪問量統計", // 圖表標題 "時間", // 目錄軸的顯示標籤 "訪問量", // 數值軸的顯示標籤 data, // 數據集 PlotOrientation.VERTICAL, // 圖表方向,此處爲垂直方向 // PlotOrientation.HORIZONTAL, //圖表方向,此處爲水平方向 true, // 是否顯示圖例 true, // 是否生成工具 false // 是否生成URL連接 ); // 設置整個圖片的背景色 chart.setBackgroundPaint(Color.PINK); // 設置圖片有邊框 chart.setBorderVisible(true); Font kfont = new Font("宋體", Font.PLAIN, 12); // 底部 Font titleFont = new Font("宋體", Font.BOLD, 25); // 圖片標題 // 圖片標題 chart.setTitle(new TextTitle(chart.getTitle().getText(), titleFont)); // 底部 chart.getLegend().setItemFont(kfont); // 獲得座標設置字體解決亂碼 CategoryPlot categoryplot = (CategoryPlot) chart.getPlot(); categoryplot.setDomainGridlinesVisible(true); categoryplot.setRangeCrosshairVisible(true); categoryplot.setRangeCrosshairPaint(Color.blue); NumberAxis numberaxis = (NumberAxis) categoryplot.getRangeAxis(); numberaxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits()); BarRenderer barrenderer = (BarRenderer) categoryplot.getRenderer(); barrenderer.setBaseItemLabelFont(new Font("宋體", Font.PLAIN, 12)); barrenderer.setSeriesItemLabelFont(1, new Font("宋體", Font.PLAIN, 12)); CategoryAxis domainAxis = categoryplot.getDomainAxis(); /*------設置X軸座標上的文字-----------*/ domainAxis.setTickLabelFont(new Font("sans-serif", Font.PLAIN, 11)); /*------設置X軸的標題文字------------*/ domainAxis.setLabelFont(new Font("宋體", Font.PLAIN, 12)); /*------設置Y軸座標上的文字-----------*/ numberaxis.setTickLabelFont(new Font("sans-serif", Font.PLAIN, 12)); /*------設置Y軸的標題文字------------*/ numberaxis.setLabelFont(new Font("宋體", Font.PLAIN, 12)); /*------這句代碼解決了底部漢字亂碼的問題-----------*/ chart.getLegend().setItemFont(new Font("宋體", Font.PLAIN, 12)); // 生成圖片並輸出 ChartUtilities.writeChartAsJPEG(response.getOutputStream(), 1.0f, chart, 500, 300, null); } catch (Exception e) { e.printStackTrace(); } } }
生成餅狀統計圖:瀏覽器
package com.xidian.servlet; import java.awt.Color; import java.awt.Font; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.jfree.chart.ChartUtilities; import org.jfree.chart.JFreeChart; import org.jfree.chart.plot.PiePlot3D; import org.jfree.chart.title.TextTitle; import org.jfree.data.general.DefaultPieDataset; /** * 生成餅狀統計圖 * @說明 * @author cuisuqiang * @version 1.0 * @since */ @SuppressWarnings("serial") public class CakeServlet extends HttpServlet { protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); // 默認數據類型 DefaultPieDataset dataType = new DefaultPieDataset(); // 數據參數 內容,數量 dataType.setValue("IE6", 156); dataType.setValue("IE7", 230); dataType.setValue("IE8", 45); dataType.setValue("火狐", 640); dataType.setValue("谷歌", 245); try { DefaultPieDataset data = dataType; // 生成普通餅狀圖除掉 3D 便可 // 生產3D餅狀圖 PiePlot3D plot = new PiePlot3D(data); JFreeChart chart = new JFreeChart( "用戶使用的瀏覽器類型", // 圖形標題 JFreeChart.DEFAULT_TITLE_FONT, // 標題字體 plot, // 圖標標題對象 true // 是否顯示圖例 ); // 設置整個圖片的背景色 chart.setBackgroundPaint(Color.PINK); // 設置圖片有邊框 chart.setBorderVisible(true); // 配置字體 Font kfont = new Font("宋體", Font.PLAIN, 12); // 底部 Font titleFont = new Font("宋體", Font.BOLD, 25); // 圖片標題 // 圖片標題 chart.setTitle(new TextTitle(chart.getTitle().getText(), titleFont)); // 底部 chart.getLegend().setItemFont(kfont); ChartUtilities.writeChartAsJPEG(response.getOutputStream(), 1.0f, chart, 500, 300, null); } catch (Exception e) { e.printStackTrace(); } } }
柱狀分佈統計圖:app
package com.xidian.servlet; import java.awt.Color; import java.awt.Font; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.jfree.chart.ChartFactory; import org.jfree.chart.ChartUtilities; import org.jfree.chart.JFreeChart; import org.jfree.chart.axis.CategoryAxis; import org.jfree.chart.axis.NumberAxis; import org.jfree.chart.plot.CategoryPlot; import org.jfree.chart.plot.PlotOrientation; import org.jfree.chart.renderer.category.BarRenderer; import org.jfree.chart.title.TextTitle; import org.jfree.data.category.DefaultCategoryDataset; /** * 柱狀分佈統計圖 * @說明 * @author cuisuqiang * @version 1.0 * @since */ @SuppressWarnings("serial") public class ParagraphsServlet extends HttpServlet { protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); DefaultCategoryDataset dataTime = new DefaultCategoryDataset(); // 這是一組數據 dataTime.addValue(52, "0-6", "2010-1-1"); dataTime.addValue(86, "6-12", "2010-1-1"); dataTime.addValue(126, "12-18", "2010-1-1"); dataTime.addValue(42, "18-24", "2010-1-1"); // 這是一組數據 dataTime.addValue(452, "0-6", "2010-1-2"); dataTime.addValue(96, "6-12", "2010-1-2"); dataTime.addValue(254, "12-18", "2010-1-2"); dataTime.addValue(126, "18-24", "2010-1-2"); // 這是一組數據 dataTime.addValue(256, "0-6", "2010-1-3"); dataTime.addValue(86, "6-12", "2010-1-3"); dataTime.addValue(365, "12-18", "2010-1-3"); dataTime.addValue(24, "18-24", "2010-1-3"); try { DefaultCategoryDataset data = dataTime; // 使用ChartFactory建立3D柱狀圖,不想使用3D,直接使用createBarChart JFreeChart chart = ChartFactory.createBarChart3D( "網站時間段訪問量統計", "時間", "訪問量", data, PlotOrientation.VERTICAL, true, false, false ); // 設置整個圖片的背景色 chart.setBackgroundPaint(Color.PINK); // 設置圖片有邊框 chart.setBorderVisible(true); Font kfont = new Font("宋體", Font.PLAIN, 12); // 底部 Font titleFont = new Font("宋體", Font.BOLD, 25); // 圖片標題 // 圖片標題 chart.setTitle(new TextTitle(chart.getTitle().getText(), titleFont)); // 底部 chart.getLegend().setItemFont(kfont); // 獲得座標設置字體解決亂碼 CategoryPlot categoryplot = (CategoryPlot) chart.getPlot(); categoryplot.setDomainGridlinesVisible(true); categoryplot.setRangeCrosshairVisible(true); categoryplot.setRangeCrosshairPaint(Color.blue); NumberAxis numberaxis = (NumberAxis) categoryplot.getRangeAxis(); numberaxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits()); BarRenderer barrenderer = (BarRenderer) categoryplot.getRenderer(); barrenderer.setBaseItemLabelFont(new Font("宋體", Font.PLAIN, 12)); barrenderer.setSeriesItemLabelFont(1, new Font("宋體", Font.PLAIN, 12)); CategoryAxis domainAxis = categoryplot.getDomainAxis(); /*------設置X軸座標上的文字-----------*/ domainAxis.setTickLabelFont(new Font("sans-serif", Font.PLAIN, 11)); /*------設置X軸的標題文字------------*/ domainAxis.setLabelFont(new Font("宋體", Font.PLAIN, 12)); /*------設置Y軸座標上的文字-----------*/ numberaxis.setTickLabelFont(new Font("sans-serif", Font.PLAIN, 12)); /*------設置Y軸的標題文字------------*/ numberaxis.setLabelFont(new Font("宋體", Font.PLAIN, 12)); /*------這句代碼解決了底部漢字亂碼的問題-----------*/ chart.getLegend().setItemFont(new Font("宋體", Font.PLAIN, 12)); ChartUtilities.writeChartAsJPEG(response.getOutputStream(), 1.0f, chart, 500, 300, null); } catch (Exception es) { es.printStackTrace(); } } }
JSP上使用IMG圖片來請求Servlet顯示圖片:dom
<%@ page language="java" 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%>"> <title></title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> </head> <body> <center> <img src="LineServlet"> <img src="PillarServlet"> <img src="ParagraphsServlet"> <img src="CakeServlet"> </center> </body> </html>
WEB.xml配置:ssh
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <filter> <filter-name>EncodingFilter</filter-name> <filter-class>org.filter.EncodingFilter</filter-class> </filter> <filter-mapping> <filter-name>EncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <servlet> <servlet-name>LineServlet</servlet-name> <servlet-class>com.xidian.servlet.LineServlet</servlet-class> </servlet> <servlet> <servlet-name>PillarServlet</servlet-name> <servlet-class>com.xidian.servlet.PillarServlet</servlet-class> </servlet> <servlet> <servlet-name>ParagraphsServlet</servlet-name> <servlet-class> com.xidian.servlet.ParagraphsServlet </servlet-class> </servlet> <servlet> <servlet-name>CakeServlet</servlet-name> <servlet-class>com.xidian.servlet.CakeServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>LineServlet</servlet-name> <url-pattern>/LineServlet</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>PillarServlet</servlet-name> <url-pattern>/PillarServlet</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>ParagraphsServlet</servlet-name> <url-pattern>/ParagraphsServlet</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>CakeServlet</servlet-name> <url-pattern>/CakeServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
爲了解決亂碼問題,我配置了一個過濾器:jsp
package org.filter; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.servlet.ServletRequest; import javax.servlet.ServletResponse; /** * 處理亂碼 * @說明 * @author cuisuqiang * @version 1.0 * @since */ public class EncodingFilter implements Filter { public void destroy() { } public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { request.setCharacterEncoding("gbk"); response.setCharacterEncoding("gbk"); chain.doFilter(request, response); } public void init(FilterConfig arg0) throws ServletException { } }