Highcharts ajax获取json对象动态生成报表生成 .

最新推荐文章于 2021-02-23 16:33:31 发布

Baple

最新推荐文章于 2021-02-23 16:33:31 发布

阅读量1.5w

点赞数 4

分类专栏：普元SOA JavaScript相关 WEB前端 JAVA 文章标签： Highcharts ajax

本文链接：https://blog.csdn.net/Baple/article/details/41013071

版权

JAVA 同时被 3 个专栏收录

282 篇文章 1 订阅

订阅专栏

WEB前端

79 篇文章 0 订阅

订阅专栏

JavaScript相关

18 篇文章 0 订阅

订阅专栏

http://blog.csdn.net/wsk7860/article/details/8751061

最近做个项目，项目经理想做一个统计报表，在网上查看些资料就选用Highchars 这里和大家分享下使用心得。

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

直接贴代码：web端

                                     },
                          yAxis: {
                                       min: 0,
                                       title: {
                                               text: '单位(mm)'
                                               }
                                        },
                                //x轴显示内容
                              xAxis: {
                                    categories: [ ]
                                         },
                                / /数据来源(多个对比的)
                                 series: [{},{},{},{}]
                                };
                               //json url 地址这里我使用的servlet
                                var url = "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();