Highcharts ajax获取json对象动态生成报表生成 .
http://blog.csdn.net/wsk7860/article/details/8751061
最近做个项目,项目经理想做一个统计报表,在网上查看些资料就选用Highchars 这里和大家分享下使用心得。
重点说明此代码是针对一个报表显示多个项对比显示。
直接贴代码:web端
<script type="text/javascript" src="js/jquery/jquery-1.7.2.js"></script> <script type="text/javascript" src="js/highcharts/highcharts.js"></script> <script type="text/javascript"> $(document).ready(function() { var options = { chart: { renderTo: 'container', //DIV容器ID type: 'column'//报表类型 }, //报表名称 title:{ text:'测试' }, / /补充说明 subtitle: { text: '报表说明' }, 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();
图片为效果图:
作 者:imsoft
Email:imsofter#163.com
出处:http://www.cnblogs.com/imsoft/
本文版权归作者和博客园共有,欢迎转载、交流,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。如果觉得本文对您有益,欢迎点赞、欢迎探讨。本博客来源于互联网的资源,若侵犯到您的权利,请联系博主予以删除。