使用highcharts生成统计图
jopen
12年前
关于怎么使用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