最近做个项目，项目经理想做一个统计报表，在网上查看些资料就选用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. python解析xml之lxml

    虽然python解析xml的库很多,但是,由于lxml在底层是用C语言实现的,所以lxml在速度上有明显优势.除了速度上的优势,lxml在使用方面,易用性也非常好.这里将以下面的xml数据为例,介绍l ...

  2. 用Chrome devTools 调试Android手机app中的web页面。

    (1) 手机要满足Android系统为4.4或更高版本,低版本不支持这种方式.(2) 确保App已经开启了webview的debug调试模式,由Android工程师协助.(2) 用usb数据线连接好手 ...

  3. MySQL 字符串截取相关函数

    MySQL 字符串截取相关函数 在工作中,可能需要将某些字段按某个分割符组成一个字符串作为字段值存取到数据库表中,比如某个任务对应三个结果,分别存储在不同的数据表中,这时可以将这三个不同表的主键按照约 ...

  4. hibernate--联合主键(了解+，掌握-)

    如果一个表有多个主键(= =一般比较少) 8.4. 组件作为联合标识符(Components as composite identifiers) 先定义一个类OrderLineId (实现接口,imp ...

  5. smaa github iryoku

    dx10 demo 这东西我没法跑nsight ...这就坑大了 里面有个 RenderTargetCollection这个东西里面有很多 rendertargets 最让我苦恼的就是 sceneRT ...

  6. eclipse中本地项目怎么和svn中的项目关联？

    网速不好,通过别的方式把项目下载到本地硬盘,然后导入eclipse,代码修改后怎么提交到svn呢? 这个纠结了好久的问题... 首先要确定eclipse中安装了svn插件. 然后在“svn资源库研究” ...

  7. 管理员必须掌握的八个cmd命令

    一.ping   它是用来检查网络是否通畅或者网络连接速度的命令.作为一个生活在网络上的管理员或者黑客来说,ping命令是第一个必须掌握的DOS命令,它所利用的原理是这样的:网络上的机器都有唯一确定的 ...

  8. centos mysql 操作

    安装mysqlyum -y install mysql-server 修改mysql配置 vi /etc/my.cnf 这里会有很多需要注意的配置项,后面会有专门的笔记 暂时修改一下编码(添加在密码下 ...

  9. Sqli-labs less 33

    Less-33 本关和上一关的payload是一样的 http://127.0.0.1/sqli-labs/Less-33/?id=-1%df%27union%20select%201,user(), ...

  10. Codeforces 452E Three Strings(后缀自动机)

    上学期很认真地学了一些字符串的常用工具,各种 suffix structre,但是其实对后缀自动机这个部分是理解地不太透彻的,以致于看了师兄A这题的代码后,我完全看不懂,于是乎重新看回一些学习后缀自动 ...