神刀安全网

JSP 图表

这次目标就是生成简单的图表

文章涉及到的几个知识点

  • 数据库链接
  • servlet 传递值给 JSP页面
  • canvasjs库生成的图表

首先,去 canvasjs官网 看一下生成图表的一些例子

比如: Pie Chart

<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> window.onload = function () {     var chart = new CanvasJS.Chart("chartContainer",     {         theme: "theme2",         title:{             text: "Gaming Consoles Sold in 2012"         },                 data: [         {                    type: "pie",             showInLegend: true,             toolTipContent: "{y} - #percent %",             yValueFormatString: "#,##0,,.## Million",             legendText: "{indexLabel}",             dataPoints: [                 {  y: 4181563, indexLabel: "PlayStation 3" },                 {  y: 2175498, indexLabel: "Wii" },                 {  y: 3125844, indexLabel: "Xbox 360" },                 {  y: 1176121, indexLabel: "Nintendo DS"},                 {  y: 1727161, indexLabel: "PSP" },                 {  y: 4303364, indexLabel: "Nintendo 3DS"},                 {  y: 1717786, indexLabel: "PS Vita"}             ]         }         ]     });     chart.render(); } </script> <script type="text/javascript" src="/assets/script/canvasjs.min.js"></script></head> <body> <div id="chartContainer" style="height: 300px; width: 100%;"></div> </body>  </html>

生成的样子就是这样

JSP 图表
pieChart.png

通过研究代码 我们会发现,有一个js 数组,canvasjs 根据 这个数组的内容生成对应的图表。既然如此,我们这里暂且不研究具体的canvasjs, 我们目的是了解js需要什么样的数据,然后提供数据,最后生成我们需要的图表。

json数据

细心的读者就会发现,上面的 js 代码中, 有一个数组, 数组里面都是json数据。

dataPoints: [                 {  y: 4181563, indexLabel: "PlayStation 3" },                 {  y: 2175498, indexLabel: "Wii" },                 {  y: 3125844, indexLabel: "Xbox 360" },                 {  y: 1176121, indexLabel: "Nintendo DS"},                 {  y: 1727161, indexLabel: "PSP" },                 {  y: 4303364, indexLabel: "Nintendo 3DS"},                 {  y: 1717786, indexLabel: "PS Vita"}             ]

如果读者不知道什么是json数据,可以先google查阅一下,补充一下知识。 这里简单说一下, 就是用于 名称 / 值对 来表示。
上例{ y: 4181563, indexLabel: “PlayStation 3” }
y 就是一个 key,它对应着一个value 4181563,
indexLabel 也是一个 key,它对应着一个value “PlayStation 3”,。

数据库

建立数据库 test,并创建表名 pie, 字段 y (int) indexLable(varchar)

JSP 图表
table1.png

录入数据

JSP 图表
table2.png

用eclipse 创建一个 Dynamic Web Project,项目名称 ChartDemo

因为需要链接MySQL数据库,我们必须引用 com.mysql.jdbc_5.1.5.jar

将此jar 包 放于

WebContent       -- Web-INT          -- lib (放于这个文件夹内)

在 src 内 , 创建一个 MySQLDB 工具类

package cn.hejing.util;  import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException;  /**  * @author  hejing * @email 2010jing@gmail.com  * @date datetime 2016年9月21日 下午11:14:50  * @description  * @version 1.0  * @since   */ public class MySQLDB {     /**      * @param args      */      //驱动程序就是之前在classpath中配置的JDBC的驱动程序的JAR 包中      public static final String DBDRIVER = "com.mysql.jdbc.Driver";      //连接地址是由各个数据库生产商单独提供的,所以需要单独记住      public static final String DBURL = "jdbc:mysql://localhost:3306/test";      //连接数据库的用户名      public static final String DBUSER = "root";      //连接数据库的密码      public static final String DBPASS = "";       Connection conn = null; //表示数据库的连接对象      /**      * 建立数据库连接      * @return 数据库连接      */      public Connection getConnection() {          try {            Class.forName(DBDRIVER);        } catch (ClassNotFoundException e1) {            // TODO Auto-generated catch block            e1.printStackTrace();        } //1、使用CLASS 类加载驱动程序          try {              // 获取连接              conn = DriverManager.getConnection(DBURL,DBUSER,DBPASS);          } catch (SQLException e) {              System.out.println(e.getMessage());          }          return conn;      }  }

这个工具类 用于 链接数据库,里面提供一个方法 getConnection(),返回的是一个 Connection。

编写servlet ShowChart.java

package cn.hejing.servlet;  import java.io.IOException; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.ResultSetMetaData; import java.sql.SQLException;  import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;  import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject;  import cn.hejing.util.MySQLDB;  /**  * Servlet implementation class ShowChart  */ @WebServlet("/ShowChart") public class ShowChart extends HttpServlet {     private static final long serialVersionUID = 1L;     private MySQLDB mysqlDB = new MySQLDB();     /**      * @see HttpServlet#HttpServlet()      */     public ShowChart() {         super();         // TODO Auto-generated constructor stub     }      /**      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)      */     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {         // TODO Auto-generated method stub         //response.getWriter().append("Served at: ").append(request.getContextPath());          Connection conn = mysqlDB.getConnection();         String sql =  "select * from pie";         PreparedStatement ps=null;         ResultSet rs = null;           try {             ps = conn.prepareStatement(sql);             rs = ps.executeQuery();         } catch (SQLException e) {             // TODO Auto-generated catch block             e.printStackTrace();         }          String data = null;          try {             if(rs.next()){                 data = resultSetToJson(rs);              }         } catch (JSONException | SQLException e) {             // TODO Auto-generated catch block             e.printStackTrace();         }          System.out.println(data);          RequestDispatcher rd = request.getRequestDispatcher("index.jsp");           request.setAttribute("chartData",data);//存值           rd.forward(request,response);//开始跳转            //request.getRequestDispatcher("index.jsp").forward(request, response);      }      /**      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)      */     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {         // TODO Auto-generated method stub         doGet(request, response);     }       public String resultSetToJson(ResultSet rs) throws SQLException,JSONException       {          // json数组          JSONArray array = new JSONArray();           // 获取列数          ResultSetMetaData metaData = rs.getMetaData();          int columnCount = metaData.getColumnCount();           // 遍历ResultSet中的每条数据           while (rs.next()) {               JSONObject jsonObj = new JSONObject();                // 遍历每一列               for (int i = 1; i <= columnCount; i++) {                   String columnName =metaData.getColumnLabel(i);                    if(columnName.equals("y")){                     int value = rs.getInt(columnName);                     jsonObj.put(columnName, value);                    }else{                     String value = rs.getString(columnName);                       jsonObj.put(columnName, value);                   }                  //jsonObj.put(columnName, value);               }                array.put(jsonObj);            }           return array.toString();       }    }

在servlet 内

private MySQLDB mysqlDB = new MySQLDB();

实例化一个MySQLDB对象

Connection conn = mysqlDB.getConnection();         String sql =  "select * from pie";         PreparedStatement ps=null;         ResultSet rs = null;           try {             ps = conn.prepareStatement(sql);             rs = ps.executeQuery();         } catch (SQLException e) {             // TODO Auto-generated catch block             e.printStackTrace();         }

这里获取到Connetion, 并且从数据库内获取数据,返回结果集。

String data = null;          try {             if(rs.next()){                 data = resultSetToJson(rs);              }         } catch (JSONException | SQLException e) {             // TODO Auto-generated catch block             e.printStackTrace();         }

将获取的结果集 转成 json格式。

转成json格式, 利用了这个方法

    public String resultSetToJson(ResultSet rs) throws SQLException,JSONException       {          // json数组          JSONArray array = new JSONArray();           // 获取列数          ResultSetMetaData metaData = rs.getMetaData();          int columnCount = metaData.getColumnCount();           // 遍历ResultSet中的每条数据           while (rs.next()) {               JSONObject jsonObj = new JSONObject();                // 遍历每一列               for (int i = 1; i <= columnCount; i++) {                   String columnName =metaData.getColumnLabel(i);                    if(columnName.equals("y")){                     int value = rs.getInt(columnName);                     jsonObj.put(columnName, value);                    }else{                     String value = rs.getString(columnName);                       jsonObj.put(columnName, value);                   }                  //jsonObj.put(columnName, value);               }                array.put(jsonObj);            }           return array.toString();       }

打印出来就是这样的结果:

[     {         "indexLabel": "Wii",         "y": 2175498     },     {         "indexLabel": "Xbox 360",         "y": 3125844     },     {         "indexLabel": "Nintendo DS",         "y": 1176121     },     {         "indexLabel": "PSP",         "y": 1727161     },     {         "indexLabel": "Nintendo 3DS",         "y": 4303364     },     {         "indexLabel": "PS Vita",         "y": 1717786     } ]

打印出来本来是字符串。
为了好看,格式化了一下,方便查看。
注意: 需要添加 json-20160810.jar

WebContent       -- Web-INT          -- lib (放于这个文件夹内)

servlet 传递值 给 JSP 页面

RequestDispatcher rd = request.getRequestDispatcher("index.jsp");           request.setAttribute("chartData",data);//存值           rd.forward(request,response);//开始跳转

index.jsp 页面

在此之前,需要在 WebContent下 创建一个文件夹asset,并将canvasjs.min.js文件放入内

WebContent       -- asset (放于这个文件夹内)       -- Web-INT          -- lib

index.jsp 代码

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"     pageEncoding="ISO-8859-1"%> <!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=ISO-8859-1"> <title>Pie Chart</title> </head> <body> <%      String piadata = request.getAttribute("chartData");   %> <div id="chartContainer1" style="height: 400px; width: 100%;"> </body> <script src="asset/canvasjs.min.js"></script> <script type="text/javascript">  window.onload = function () {     var chart = new CanvasJS.Chart("chartContainer1",     {         theme: "theme2",         title:{             text: "Gaming Consoles Sold in 2012"         },                 data: [             {                        type: "pie",                 showInLegend: true,                 toolTipContent: "{y} - #percent %",                 yValueFormatString: "#,##0,,.## Million",                 legendText: "{indexLabel}",                 dataPoints:<%out.print(piadata);%>             }         ]     });     chart.render();  } </script>  </html>

jsp页面 获取从servlet 传递过来的数据

<%      String piadata = request.getAttribute("chartData");   %>

把代码 输出到 js内

    dataPoints:<%out.print(piadata);%>

到此,基本上完成。
项目结构如下

JSP 图表
structure.png

运行结果:

JSP 图表
result.png

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » JSP 图表

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址