使用highcharts生成统计图

最新推荐文章于 2019-10-19 10:41:19 发布

青蛙小王子

最新推荐文章于 2019-10-19 10:41:19 发布

阅读量3.4k

点赞数 1

分类专栏： highcharts js统计图

本文链接：https://blog.csdn.net/walkcode/article/details/7943758

版权

highcharts 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

js统计图

1 篇文章 0 订阅

订阅专栏

关于怎么使用highcharts的文章网络上并不多见，所以呢花了点时间学了下，现在就给大家分享下我的经验。

1.开发准备

highcharts的js开发包，json开发包，jquery开发包

这里着重使用json，这是我观察demo例子发现的，至于怎么从后台拿到json就要使用jquery的ajax请求和后台交互。

2.使用servlet取得相关数据并拼接json字符串

package org.lxh;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.*;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class GetData extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		this.doPost(request, response);
	}

	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.setCharacterEncoding("UTF-8");
		// 添加模拟数据
		// 添加3个学生
		List<StudentInfo> students = new ArrayList<StudentInfo>();
		StudentInfo stuident1 = new StudentInfo();
		stuident1.setName("黎明");
		List<Integer> allgrade = new ArrayList<Integer>();
		allgrade.add(90);
		allgrade.add(95);
		allgrade.add(80);
		allgrade.add(85);
		stuident1.setGrade(allgrade);
		students.add(stuident1);
		StudentInfo stuident2 = new StudentInfo();
		stuident2.setName("潘玮柏");
		List<Integer> allgrade2 = new ArrayList<Integer>();
		allgrade2.add(60);
		allgrade2.add(95);
		allgrade2.add(70);
		allgrade2.add(50);
		stuident2.setGrade(allgrade2);
		students.add(stuident2);

		StudentInfo stuident3 = new StudentInfo();
		stuident3.setName("李宇春");
		List<Integer> allgrade3 = new ArrayList<Integer>();
		allgrade3.add(68);
		allgrade3.add(93);
		allgrade3.add(78);
		allgrade3.add(59);
		stuident3.setGrade(allgrade3);
		students.add(stuident3);

		//JSONObject json = new JSONObject();
		JSONArray array = new JSONArray();
		//JSONArray gradeData = new JSONArray();
		JSONArray Data;
		JSONObject member = null;

		member = new JSONObject();
		Iterator<StudentInfo> it = students.iterator();
		while (it.hasNext()) {
			StudentInfo info = it.next();
			member.put("name", info.getName());

			Data = new JSONArray();
			List<Integer> grades = info.getGrade();
			Iterator<Integer> iterator = grades.iterator();
			while (iterator.hasNext()) {
				Data.add(iterator.next());
				
			}
			member.put("data", Data);
			array.add(member);

		}
		String str=array.toString();
        System.out.println(str);
		//json.put("series", array);
		//System.out.println(json.toString());
		PrintWriter pw = response.getWriter();
		//pw.print(json.toString());
		pw.print(str);
		pw.close();

	}

}

这里的数据都是我自己弄的测试数据，说到这里可能会有数据全是动态的情况也就是说在图表上x轴和y轴的数据都是动态的，这样子就需要嵌套jquery的ajax请求了。以学生成绩为例我们就需要分别拼接x轴和y轴的数据了。这个大家灵活控制就好了。

3.前台显示数据

<!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=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>

<script type="text/javascript">
$(function () {
    var chart;
   // var total;
   
    
    $(document).ready(function() {
    	
    	$.ajax({
	        type: "POST",
	        dataType: "JSON",
	        url: "GetData",
	        success: function (msg) {
	            
	        	/*var str=JSON.stringify(msg);*/
	    
	        
	        	/*var total=JSON.parse(str);*/
	        	var total=msg;
	        	chart = new Highcharts.Chart({
	            	
	                chart: {
	                    renderTo: 'container',
	                    
	                    type: 'column'
	                },
	                title: {
	                    text: '学生成绩'
	                },
	                subtitle: {
	                    text: '09软件305班'
	                },
	                xAxis: {
	                    categories: [
	                        '第一周',
	                        '第二周',
	                        '第三周',
	                        '第四周',
	                    ]
	                },
	                yAxis: {
	                    min: 0,
	                    title: {
	                        text: '成绩 (分)'
	                    }
	                },
	                legend: {
	                    layout: 'vertical',
	                    backgroundColor: '#FFFFFF',
	                    align: 'left',
	                    verticalAlign: 'top',
	                    x: 100,
	                    y: 70,
	                    floating: true,
	                    shadow: true
	                },
	                tooltip: {
	                    formatter: function() {
	                    	
	                        return ''+
	                            this.x +': '+ this.y +' mm';
	                    }
	                },
	                plotOptions: {
	                    column: {
	                        pointPadding: 0.2,
	                        borderWidth: 0
	                    }
	                },
	                series: total
	            });
	        	
	        	
	        	
	           
	        }
    	});
	    
        
    });
    
});
		</script>	
</head>
<body>



<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>

界面很简单吧就是把数据的地方换成从后台取出来的json就OK了。差不多每种类型的图表都是这样弄，我这里的x轴我把数据写死了，大家可以弄成动态的，原理都是一样的。

来看下效果图吧