使用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 students = new ArrayList();
		StudentInfo stuident1 = new StudentInfo();
		stuident1.setName("黎明");
		List allgrade = new ArrayList();
		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 allgrade2 = new ArrayList();
		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 allgrade3 = new ArrayList();
		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 it = students.iterator();
		while (it.hasNext()) {
			StudentInfo info = it.next();
			member.put("name", info.getName());

			Data = new JSONArray();
			List grades = info.getGrade();
			Iterator 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.前台显示数据

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

来看下效果图吧

很简单吧，只要后台json没有拼接错就很好弄了。