使用highcharts生成統計圖
關于怎么使用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軸我把數據寫死了，大家可以弄成動態的，原理都是一樣的。
來看下效果圖吧
很簡單吧，只要后臺json沒有拼接錯就很好弄了。
轉自：http://blog.csdn.net/chenwill3/article/details/7943758
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！