在網頁中生成具有互動功能的統計圖（用到Serlvet/JSP）

阿新 • • 發佈：2019-01-21

今天研究了一個下午的開源統計工具JFreeChart，通過參考李剛所著《Struts2權威指南》，完成了一個在網頁中生成具有互動功能的統計圖的案例。

效果圖如下：

現在記錄如下，以供日後實踐參考：

基本步驟如下：

二、建立記錄圖書銷售情況的資料庫，在這裡我用test表示我的資料庫，表名為jfreechart_book,資料庫指令碼如下：

            create table `test`.`jfreechart_book`(
            `id` int unsigned not null auto_increment,
           `book_name` varchar(45) default '' not null,
           `book_count` int unsigned default '0' not null,
            primary key (`id`)
            );
            create unique index `PRIMARY` on `test`.`jfreechart_book`(`id`);

三、用java 開發工具Eclilpse+MyEclipse IDE建立一個web project：JFreeChartDemo

四、將下載好所需要的包並解壓，將解壓好的jar包拷貝到上面建立好的工程的lib下

五、開始編碼

（1）編寫連線資料庫的類DBConnection

（2）編寫資料庫表對應的java類Book

（3）編寫操作資料庫（這裡只提供查詢操作）dao類BookManagerDAO

（4）編寫由JFreeChart這個組建構造統計圖的類CreateChart

                /**
* @author qpy_2006
*/
public class CreateChart {

/** 通過引數map物件從資料庫中獲取資料,用以建立一個DefaultPieDataset物件 */
public DefaultPieDataset getDataset(Map<Integer,Book> map)
{
  DefaultPieDataset dataSet = new DefaultPieDataset();
  Collection<Book> collection = map.values();
  Iterator<Book> it = collection.iterator();
  while(it.hasNext())
  {
   Book book = it.next();
   dataSet.setValue(book.getBookName(), book.getBookCount());
  }
  return dataSet;
}

public JFreeChart getChart(DefaultPieDataset dataSet)
{
  /* chart的標題可以自行定義，在這裡就省略了 */
  JFreeChart chart = ChartFactory.createPieChart("圖書銷售量統計圖",dataSet,true,false,true);
  /**
   * 設定chart物件的各種屬性
   */
  // 設定圖示標題，及字型
  chart.setTitle(new TextTitle("圖書銷售統計圖",new Font("黑體",Font.BOLD,22)));
  //取得統計圖表的第一個圖例
  LegendTitle legend = chart.getLegend(0);
  //修改這個圖例的字型
  legend.setItemFont(new Font("宋體",Font.ITALIC,12));
  //獲得餅圖的Plot物件
  PiePlot plot = (PiePlot) chart.getPlot();
  //設定餅圖各部分的標籤字型
  plot.setLabelFont(new Font("楷體",Font.PLAIN,22));
  //設定背景透明度(0-1.0之間)
  plot.setBackgroundAlpha(0.9f);
  //設定前景透明度(0-1.0之間)
  plot.setForegroundAlpha(0.5f);
  return chart;
}
}

（5）編寫系統控制器Servlet類ChartServlet

/**
* @author qpy_2006
*/
public class ChartServlet extends HttpServlet {

private static final long serialVersionUID = 7292944149506099810L;

public ChartServlet() {
super();
}

public void destroy() {
super.destroy();
}

public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  this.doPost(request, response);
}
/**
* @author qpy_2006
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  response.setContentType("image/jpeg;charset=gbk");
  /* 統計圖示的標題可以由使用者自己定義 */
  OutputStream out = response.getOutputStream();
  CreateChart createChart = new CreateChart();
  Map<Integer,Book> map = new HashMap<Integer,Book>();
  try {
   map = BookManagerDAO.getAllBook();
  } catch (ClassNotFoundException e) {
   System.err.println("servlet doPost-->"+e.getMessage());
  }
  JFreeChart chart = createChart.getChart(createChart.getDataset(map));
  ChartUtilities.writeChartAsJPEG(out, 1, chart, 780, 600, null);
  out.close();
}
}

（6）在web.xml檔案中配置第五步建立好的ChartServlet類

<servlet>
  <display-name>ChartServlet</display-name>
  <servlet-name>ChartServlet</servlet-name>
  <servlet-class>org.qpy.servlet.ChartServlet</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>ChartServlet</servlet-name>
  <url-pattern>/chart</url-pattern>
</servlet-mapping>

（7）建立一個用於向該ChartServlet發出請求的jsp頁面

<%@ page language="java" pageEncoding="GBK"%>
<%
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>
<div><span><a href="<%=path %>/chart">檢視圖書銷售統計圖</a> </span></div>
</body>
</html>

工程的目錄結構如下圖：

在網頁中生成具有互動功能的統計圖（用到Serlvet/JSP）

在網頁中生成具有互動功能的統計圖（用到Serlvet/JSP）

解決一個表中的資料由同表中兩欄位加權和得到（用觸發器解決）

科室管理系統中，運用百度編輯器（ueditor1_4_3-utf8-jsp）出現的一系列問題！

java網頁端資料傳輸到後端程式（Servlet 和jsp）

網頁中記住密碼這個功能的非安全性

使用ECharts實現各種資料統計圖（餅圖，柱狀圖，折線圖）在javaWeb中的應用

web開發中常用的幾種統計圖使用

在網頁中生成QQ線上臨時對話方塊/聊天

網頁中實現分頁功能的幾種方法

Python 爬取網頁中JavaScript動態添加的內容（二）

從Tensorflow模型檔案中解析並顯示網路結構圖（CKPT模型篇）

手把手教你編寫一個具有基本功能的shell（已開源）

GitHub+hexo+gitment搭建一個具有評論功能的個人部落格(入門級）

在TensorFlow中對比兩大生成模型：VAE與GAN（附測試程式碼）

android自定義環形統計圖（帶動畫）

java實現各種資料統計圖（柱形圖，餅圖，折線圖）

獲取網頁中的視訊下載地址（用headless browser）

分散式系統應用中生成全域性唯一ID的演算法（snowflake)----java 實現，單例模式

[Linux] Linux 中的基本命令與目錄結構（待移除）

轉：【Java並發編程】之十二：線程間通信中notifyAll造成的早期通知問題（含代碼）

在網頁中生成具有互動功能的統計圖（用到Serlvet/JSP）

相關推薦