使用highcharts生成统计图

jopen 9年前

关于怎么使用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轴我把数据写死了,大家可以弄成动态的,原理都是一样的。

来看下效果图吧

使用highcharts生成统计图

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

 转自:http://blog.csdn.net/chenwill3/article/details/7943758