Highcharts（jsp+ajax+json+servlet+javabean）

Bule_coast_lkj

于 2020-10-09 10:28:14 发布

阅读量357

点赞数

分类专栏：前端 Java 文章标签：前端 java

本文链接：https://blog.csdn.net/qq_41553370/article/details/108973516

版权

Java 同时被 2 个专栏收录

2 篇文章 1 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

Highcharts入门（jsp+ajax+json+servlet+javabean）

1.Highcarts简介

源码、经验交流QQ群：613879714，有问题QQ群提问，这里不能及时回复。

官网链接：https://www.highcharts.com.cn/
在这里插入图片描述

Highcharts 系列软件包含 Highcharts JS，Highstock JS，Highmaps JS 共三款软件，均为纯 JavaScript 编写的 HTML5 图表库，全部源码开放，个人及非商业用途可以任意使用及源代码编辑。

2.图表原理

图表的类型通过type属性指定,这里我就介绍小学三种常用见的图表也是我们常用的图标：

chart:{
       type: 'line'   //pie-饼图 ，默认spline-折线，column-柱形，
        }

从表格获取数据源（根据一个数据表请让你画统计图，这是小学生的常规操作）
ajax数据源
ajax获取json源数据

3.Highcarts简单使用

建立一个maven项目，导入web内容，项目结构如下图：

导入相关的依赖坐标

        <dependencies>
            <dependency>
                  <groupId>javax.servlet</groupId>
                  <artifactId><u>jstl</u></artifactId>
                  <version>1.2</version>
            </dependency>
            <dependency>
                  <groupId><u>taglibs</u></groupId>
                  <artifactId>standard</artifactId>
                  <version>1.1.2</version>
            </dependency>
            <dependency>
                  <groupId>com.alibaba</groupId>
                  <artifactId><u>fastjson</u></artifactId>
                  <version>1.2.62</version>
            </dependency>
  </dependencies>
  <!-- 配置 <u>maven</u> 项目的<u>jdk</u>版本 -->
      <build>
            <plugins>
                  <plugin>
                        <groupId>org.apache.maven.plugins</groupId>
                        <artifactId><u>maven</u>-compiler-<u>plugin</u></artifactId>
                        <configuration>
                              <source>1.8</source>
                              <target>1.8</target>
                        </configuration>
                  </plugin>
            </plugins>
      </build>

创建index.jsp文件，引入highcharts支持库（想下载手动引入的可以去官网下载）

highcharts基于JQuery，所以首先引入在线JQuery库。

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

引入在线highcharts支持库

<script src="http://code.highcharts.com/highcharts.js"></script>

如果使用页面表格数据，需要引入在线数据模型支持库

<script src="https://code.highcharts.com/modules/data.js"></script>

index.jsp源码

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!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>Highcharts</title>
	<!-- highcharts基于Jquery -->
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<!-- highcharts -->
	<script src="http://code.highcharts.com/highcharts.js"></script>
	<!-- highcharts从页面表格table获取数据 -->
	<script src="https://code.highcharts.com/modules/data.js"></script>
    <script type="text/javascript">
        $(function () {
        	//隐藏表格
        	$("#datatable").hide();
            line();
            $("#linebutton").click(function(){
            	$.ajax({
            		url:"${pageContext.request.contextPath}/ajaxfruit",
            		data:{},
       			 	type:"post",
       			 	dataType: "json",
       			 	success: function(data){
       			 		//alert("异步请求成功");
       			 		var nameArray = new Array();
    					var numberArray = new Array();
       			 		for(var i in data){
       			 			nameArray[i]=data[i].name;
       			 			numberArray[i]=data[i].y;
       			 		}
       			 		piedata=data;
       			 		column(nameArray,numberArray);
       			 		pie(data);
       			 	},
       			 	error:function(){
       					 alert("异步请求失败");
       				}
            	});
            });
        });
        function column(nameArray,numberArray) {
            var options= {
            	chart:{
            		type:"column"
            	},
            	title:{
            		text:"水果柱状图（ajax数据源）"
            	},
            	xAxis:{
            		categories:nameArray
            	},
            	yAxis:{
            		min:0,
            		title:{
            			text:"数量"
            		}
            	},
            	series:[{
            		name:"水果",
            		data:numberArray
            	}]
            };
            $('#column').highcharts(options);
        }
        function pie(piedata){
        	var options ={
        			chart: {
            			type: 'pie'
            		},
            		title: {
            			text: '水果饼图（ajax获取json数据源）'
            		},
            		tooltip: {
            			pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            		},
            		plotOptions: {
            			pie: {
            				dataLabels: {
            					enabled: true,
            					format: '<b>{point.name}</b>: {point.percentage:.2f} %',
            				}
            			}
            		},
            		series: [{
            			name: '占',
            			colorByPoint: true,
            			data: piedata
            		}]
        	};
        	$('#pie').highcharts(options);
        }
        function line() {
        	var json = {
        		data:{
        	        table: 'datatable'
        	    },
        	    chart:{
                     type: 'line'   //pie-饼图 ，默认spline-折线，column-树形，
                },
                title:{
                     text: '水果柱形图(表格数据源)'
                },
                yAxis:{
                     allowDecimals: false,
                     title: {
                     	text: '个数'
                     }
                },
                tooltip:{
                     formatter: function () {
                         return '<b>' + this.series.name + '</b>' +' '+ this.point.y
                         + '<br/>' + this.point.name.toLowerCase();
                     }
                },
                credits:{
                     enabled: false
                }
        	};
            $('#line').highcharts(json);
        }
    </script>
</head>
<body>
	<input id="linebutton" type="button" value="ajax获取json数据源">
	<hr>
    <div id="line" style="width: 500px; height: 400px;float:left"></div>
	<div id="column" style="width: 500px; height: 400px;float:right"></div>
	<div id="pie" style="width: 500px; height: 400px;float:center"></div>
		<table id="datatable" border="1">
        <thead>
        <tr><th>水果</th><th>个数</th></tr>
        </thead>
        <tbody>
             <c:forEach items="${listFruits}" var="listFruit">
                  <tr>
                      <th>${listFruit.name}</th>
                      <td>${listFruit.y}</td>
                  </tr>
             </c:forEach>
         </tbody>
    </table>
</body>
</html>

在pojo包里创建NameY.java文件

package com.qst.pojo;
public class NameY {
      private String name;
      private int y;
      public String getName() {
            return name;
      }
      public void setName(String name) {
            this.name = name;
      }
      public int getY() {
            return y;
      }
      public void setY(int y) {
            this.y = y;
      }
      @Override
      public String toString() {
            return "NameY [name=" + name + ", y=" + y + "]";
      }     
}

在 dao包里创建NameYDao.Java文件

package com.qst.dao;
import java.util.ArrayList;
import java.util.List;
import com.qst.pojo.NameY;
public class NameYDao {
	public List<NameY> getNameY(){
		List<NameY> listFruit = new ArrayList<NameY>();
		NameY namey1 = new NameY();
		namey1.setName("西瓜");
		namey1.setY(1);
		listFruit.add(namey1);
		NameY namey2 = new NameY();
		namey2.setName("桃子");
		namey2.setY(3);
		listFruit.add(namey2);
		NameY namey3 = new NameY();
		namey3.setName("李子");
		namey3.setY(2);
		listFruit.add(namey3);
		NameY namey4 = new NameY();
		namey4.setName("梨");
		namey4.setY(4);
		listFruit.add(namey4);
		return listFruit;
	}
}

在servlet包里创建fruitServlet.java文件

package com.qst.servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.qst.dao.NameYDao;
import com.qst.pojo.NameY;
public class fruitServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("text/html;charset=utf-8");
		NameYDao nameyDao =new NameYDao();
		List<NameY> listFruit = nameyDao.getNameY();
		request.setAttribute("listFruits", listFruit);
		request.getRequestDispatcher("index.jsp").forward(request, response);
	}
}

在servlet包里创建ajaxFruitServlet.java文件

package com.qst.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.qst.dao.NameYDao;
import com.qst.pojo.NameY;
public class ajaxFruitServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/json;charset=utf-8");
		PrintWriter out=response.getWriter();
		NameYDao nameyDao =new NameYDao();
		List<NameY> listFruit = nameyDao.getNameY();
		String json = JSON.toJSONString(listFruit);
		out.println(json);
	}
}

映射路径文件web.xml

  <servlet>
    <description></description>
    <display-name>fruitServlet</display-name>
    <servlet-name>fruitServlet</servlet-name>
    <servlet-class>com.qst.servlet.fruitServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>fruitServlet</servlet-name>
    <url-pattern>/fruit</url-pattern>
  </servlet-mapping>
  <servlet>
    <description></description>
    <display-name>ajaxFruitServlet</display-name>
    <servlet-name>ajaxFruitServlet</servlet-name>
    <servlet-class>com.qst.servlet.ajaxFruitServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>ajaxFruitServlet</servlet-name>
    <url-pattern>/ajaxfruit</url-pattern>
  </servlet-mapping>

4.运行结果

在这里插入图片描述

Bule_coast_lkj

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Highcharts（jsp+ajax+json+servlet+javabean）

Highcharts入门（jsp+ajax+json+servlet+javabean）1.Highcarts简介官网链接：https://www.highcharts.com.cn/Highcharts 系列软件包含 Highcharts JS，Highstock JS，Highmaps JS 共三款软件，均为纯 JavaScript 编写的 HTML5 图表库，全部源码开放，个人及非商业用途可以任意使用及源代码编辑。2.图表原理图表的类型通过type属性指定,这里我就介绍小学三种常用见的图表
复制链接

扫一扫