使用highcharts生成统计图
2012-09-04 21:07
477 查看
关于怎么使用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没有拼接错就很好弄了。
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没有拼接错就很好弄了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用highcharts生成统计图
- 使用C#和Excel进行报表开发（三）－生成统计图（Chart）
- 使用Highcharts结合PHP与Mysql生成饼状图
- 使用Highcharts生成折线图与曲线图
- 使用C#和Excel进行报表开发（三）－生成统计图（Chart）
- 使用Highcharts生成折线图与曲线图
- 使用C#和Excel进行报表开发－生成统计图Chart
- 使用Highcharts结合PHP与Mysql生成饼状图
- 使用 HighCharts 动态获取后台数据生成图表
- 使用C#和Excel进行报表开发（三）－生成统计图（Chart）
- 使用Highcharts生成折线图_at last
- 使用C#和Excel进行报表开发（三）－生成统计图（Chart）
- 使用Highcharts结合PHP与Mysql生成饼状图
- 使用Highcharts生成折线图_at last
- 使用Highcharts生成柱状图
- 使用Highcharts结合PHP与Mysql生成饼状图
- 项目开发 - 使用OWC生成统计图
- Highcharts 的使用（各种统计图）（难点：绑定数据）
- .NET 使用 Highcharts生成扇形图 柱形图
- 使用Highcharts结合PHP与Mysql生成饼状图