最近做个项目，项目经理想做一个统计报表，在网上查看些资料就选用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();

图片为效果图：

Highcharts axja 获取json对象动态生成报表生成的更多相关文章

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

    http://blog.csdn.net/wsk7860/article/details/8751061 最近做个项目,项目经理想做一个统计报表,在网上查看些资料就选用Highchars 这里和大家分 ...

  2. angular js根据json文件动态生成路由状态

    项目上有一个新需求,就是需要根据json文件动态生成路由状态,查阅了一下资料,现在总结一下发出来: 首先项目用到的是angular的UI-路由,所以必须引入angular.js和angular-ui- ...

  3. ajax获取json对象

    ajax获取json对象 ajax获取json数据,都是一个原理,设置response 的Content-Type:application/json,这样浏览器自动会解析为json对象 $result ...

  4. java根据url获取json对象

    package test; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; ...

  5. 获取json对象的长度

    获取json对象的长度跟获取一个普通对象或数组的方法不一样,json对象没有length属性,不能直接用.length直接获得. function getJsonLength(json){ var j ...

  6. 获取Json对象的长度或计数

    最近又开始写博客了.因为最近的工作又开始与技术方面接口了.现在在开发WEB的时候,经常会遇到JSON对象的传递,JSON是个好东西,但是它却没有提供一些简单便捷的处理方法,其中获取JSON对象的长度就 ...

  7. javascript获取json对象的key名称的两种方法

    javascript获取json对象的key名称的两种方法 数据处理中,你可能接收到一个不确定内容格式的json对象,然后要把key的值提取出来.今天试过两种可以提取json key的方法,均可以正常 ...

  8. jquery获取json对象中的key小技巧

    jquery获取json对象中的key小技巧 比如有一个json var json = {"name" : "Tom", "age" : 1 ...

  9. 获取JSON对象的属性值

    1.问题背景 有一个json对象,其中有键值对,那怎样获取json对象中属性值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

随机推荐

  1. 如何利用Dreamwever快速创建表格？？？

    这样的一张表,用table写完感觉好累,很多单元格都不一样大,还要单独设置样式,今天还分享下用Dreamwever快速创建表格. 可能这会有人知道了!当然是插入表格了!

  2. hdu 5691 Sitting in Line 状压dp

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5691 题解: 和tsp用的状压差不多,就是固定了一些访问顺序. dp[i][j]表示前cnt个点中布 ...

  3. Solr Schema.xml和solrconfig.xml分析(转)

    Solr Schema.xml和solrconfig.xml分析 (http://yinwufeng.iteye.com/blog/964040) 一.字段配置(schema) schema.xml位 ...

  4. 微信连WiFi关注公众号流程更新 解决ios微信扫描二维码不关注就能上网的问题

    前几天鼓捣了一下微信连WiFi功能,设置还蛮简单的,但ytkah发现如果是ios版微信扫描微信连WiFi生成的二维码不用关注公众号就可以直接上网了,而安卓版需要关注公众号才能上网,这样就少了很多ios ...

  5. 帝国cms栏目别名如何调用?

    我们在用帝国cms建站时经常会发现栏目的标题不好设置,栏目名称太长的话在后台那边看了眼花,太短又不好优化.能不能直接调用栏目别名呢?栏目别名不会什么影响.那么,帝国cms栏目别名怎么调用呢?和ytka ...

  6. jQuery1.9.1--attr,prop与val方法源码分析

    这里只介绍这几个方法的源码,这部分引用了一个技巧,钩子对象,用来做兼容fixed的对象,后面也有一些使用.钩子对象具体的兼容细节这里就不详解了. var nodeHook, boolHook, rcl ...

  7. poi excel文件上传并解析xls文件

    1.jsp页面 <form action="hw/pe_xls_upload" method="post" enctype="multipart ...

  8. Chapter 4 持久存储数据对象

    1.使用with open("filename.扩展名","r/w/rb/wb") as data代替data=open(..);data.close() 打开 ...

  9. 九个衡量 Rails 应用性能的小方法

    你有个绝佳的商业创意,日复一日地将它完善丰满起来.后来,你雇了一群天赋异禀的开发者.Web 设计师和用户体验专家,他们用一种非常棒的框架--Ruby on Rails 帮你实现长久以来的梦想. 你的网 ...

  10. 【剑指offer】和为S的连续整数序列

    找到所有和为S的连续整数序列,序列长度>=2 我的思路:数学法,限定首元素范围,计算序列长度. 书上解法:用small和big两个游标记录序列的开始和结束位置,调整游标. 我的解法: /* ​直 ...