Highcharts图表-ajax-获取json数据生成图表

逃离我推掉我的手 2021-09-14 01:46 338阅读 0赞

重点说明此代码是针对一个报表显示多个项对比显示。

直接贴代码：web端

\},  
                          yAxis: \{  
                                       min: 0,  
                                       title: \{  
                                               text: '单位(mm)'  
                                               \}  
                                        \},  
                                //x轴显示内容  
                              xAxis: \{  
                                    categories: \[ \]  
                                          \},  
                                / /数据来源(多个对比的)          
                                 series: \[\{\},\{\},\{\},\{\}\]  
                                \};  
                               //json url 地址这里我使用的servlet  
                                var url =  "[http://127.0.0.1:8080/servlet/JsonServlet][http_127.0.0.1_8080_servlet_JsonServlet]";  
                                $.getJSON(url,function(data) \{   
                                       var i,len=data.length;           
                                        for( i=0;i<len;i++)\{

//赋值 series  
                                          options.series\[i\].data = data\[i\].list;      
                                          options.series\[i\].name = data\[i\].name;

//对报表X轴显示名称赋值  
                                           options.xAxis.categories\[i\]=data\[i\].year;  
                                      \}      
                                   var chart = new Highcharts.Chart(options);  
                             \});  
                      \});

</script>  
  <body>  
    <div id="container"></div>       
  </body>

后台servlet doget() 方法内容：

response.setCharacterEncoding("UTF-8");  
    response.setContentType("text/html");    
    JSONArray members = new JSONArray();  
    PrintWriter out= response.getWriter();  
    try \{  
     for(int i=1;i<5;i++)\{

//构建JSON 对象  
      JSONObject member = new JSONObject();

//构建series所需参数  
      member.put("name", "张飞"+i); //对应series.name  
      JSONArray list = new JSONArray();//对应series.data  
      for(int k=1;k<5;k++)\{  
       list.put(k\*100);  
      \}  
      member.put("year", (2012 + i));//对应Y轴显示  
      member.put("list", list);  
      member.put("color", "\#FF0022");//如需要可以设置柱状图颜色  
      members.put(member);  
     \}  
     
   out.write(members.toString());  
     
  \} catch (JSONException e) \{  
   // TODO Auto-generated catch block  
   e.printStackTrace();  
  \}  
        
  out.flush();  
  out.close();

图片为效果图：

![1365383586_2199.jpg][]

[JavaScript]: http://lib.csdn.net/base/javascript
[jQuery]: http://lib.csdn.net/base/jquery
[Container]: http://lib.csdn.net/base/docker
[Link 1]: http://lib.csdn.net/base/softwaretest
[http_127.0.0.1_8080_servlet_JsonServlet]: http://127.0.0.1:8080/servlet/JsonServlet
[1365383586_2199.jpg]: https://img-my.csdn.net/uploads/201304/08/1365383586_2199.jpg