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();

图片为效果图：

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

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

    最近做个项目,项目经理想做一个统计报表,在网上查看些资料就选用Highchars 这里和大家分享下使用心得. 重点说明此代码是针对一个报表显示多个项对比显示. 直接贴代码:web端 <scrip ...

  2. ajax获取json对象

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

  3. Spring mvc 下Ajax获取JSON对象问题 406错误

    我在学习springmvc过程中(我的项目是配置的后缀是.html),从controller返回对象. 如果我不使用 mvc-annotation-driver,而是手动配置,AnnotationMe ...

  4. Spring mvc下Ajax获取JSON对象问题 406错误

    spring 通过@ResponseBody标签返回JSON数据的方法都报406错: Failed to load resource: the server responded with a stat ...

  5. JS-利用ajax获取json数据，并传入页面生成动态tab

    封装好的:ajax.js function ajax(url, fnSucc,fnFaild){ //1[创建] if(window.XMLHttpRequest){ var oAjax = new ...

  6. ajax获取json数据为undefined--原因解析

    解决办法:var dataObj=eval("("+data+")");//转换为json对象 问题: 1. 碰到一个问题ajax成功获取json数据后,取值显 ...

  7. 通过Jquery中Ajax获取json文件数据

    1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...

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

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

  9. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

随机推荐

  1. xml数据解析调研

    XML数据解析http://www.tuicool.com/articles/Nraau2(必用) http://www.cnblogs.com/pengyingh/articles/2342699. ...

  2. java.io中流的操作：字节流、字符流

    java.io中流的操作:字节流.字符流(1)使用File类打开一个文件(2)通过字节流或字符流的子类指定输出的位置(3)进行读/写操作(4)关闭输入/输出 1.字节流:主要是byte类型数据,以by ...

  3. C#生成唯一的ID保存到数据库

    直接用.NET Framework 提供的 Guid() 函数: Guid.NewGuid()是指生成唯一码的规则 System.Guid.NewGuid().ToString()全球唯一标识符 (G ...

  4. exit（0）与exit（1）、return区别

    exit(0):正常运行程序并退出程序: exit(1):非正常运行导致退出程序: return():返回函数,若在主函数中,则会退出函数并返回一值. 详细说: 1. return返回函数值,是关键字 ...

  5. == 和 isEqualToString的区别之备忘

    == 比较的是指针 isEqualToString 比较的是指针指向的内容 比如: NSString * strA = @"abc"; NSString * strB = @&qu ...

  6. 理解Mac和iOS中的 Event 处理

    根据现在的理解,我把event处理分为5部分,第一是,Event处理的Architecture:第二是,Event的Dispatch到first responder之前: 第三是,Event从firs ...

  7. EF学习笔记（一）

    EF(EntityFramwork)实体框架:主要是将实体类(EntityClass)和数据表(Table)进行映射(Map). EF核心对象: DbContext   (数据访问核心对象)      ...

  8. JS 跨域问题浅析及解决方法优缺点对比（转）

    1.所谓 JS 跨域问题,是指在一个域下的页面中通过js访问另一个不同域下 的数据对象, 出于安全性考 虑,几乎所有浏览器都不允许这种跨域访问,这就导致在一些ajax应用中, 使用跨域的web ser ...

  9. Varnost slovenskih GSM omrežij III

    V torek smo pisali tudi o tem, da Si.Mobil v svojem omrežju dovoli uporabo A5/0 (nešifriranega preno ...

  10. php大力力 [001节]2015-08-21.php在百度文库的几个基础教程新手上路日记 大力力php 大力同学 2015-08-21 15:28

    php大力力 [001节]2015-08-21.php在百度文库的几个基础教程新手上路日记 大力力php 大力同学 2015-08-21 15:28 话说,嗯嗯,就是我自己说,做事认真要用表格,学习技 ...