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. Android调用远程Service的参数和返回值都需要实现Parcelable接口

    import android.os.Parcel;import android.os.Parcelable; public class Person implements Parcelable{ pr ...

  2. POJ 1860 Currency Exchange 最短路 难度:0

    http://poj.org/problem?id=1860 #include <cstdio> //#include <queue> //#include <deque ...

  3. 二模 （5）day1

    第一题: 题目大意:解一元一次方程(只有+-符号): 解题过程:直接处理处两边的x的系数和常数项,字符串的处理即可. 第二题: 题目大意:求逆序对数. 解题过程:直接归并排序. 第三题: 题目大意:多 ...

  4. TDBGridEh的 搜索面板 TDBGridSearchPanel

    TCustomDBGridEh.Create FSearchPanelControl := TDBGridSearchPanelControlEh.Create(Self); //这里,创建的构造函数 ...

  5. JSP中的EL

    1.为什么要使用EL 使用<jsp:getProperty>,只能访问bean属性的性质,不能访问嵌套性质.例如一个含有Dog对象的Person对象. 当然使用脚本可以工作,但是如果不想使 ...

  6. ubuntu安装多个qt版本--不同qt版本编译同一个程序时出现错误--解决方案

    方法: 在ubuntu终端: # make clean   //有Makefile文件的情况 # rm Makefile *.pro.user # qmake  //有多个qt版本,最好指定qmake ...

  7. 打饭助手之NABC

    Need: 同学们在早上跑操后要吃早饭,还有中午打饭时人更是多.常常要排很长的队伍,造成时间的浪费,和焦急的等待.因此我们需要错开打饭的高峰期,来避免打饭排队的悲哀. Approach: 通过获取摄像 ...

  8. php的预定义数组

    PHP预定义变量数组 1.$_SERVER 变量由Web服务器设定或者直接与当前的脚本的执行环境相关联 $_SERVER超级全局变量包含由web服务器创建的信息,它提供了服务器和客户配置及当前请求环境 ...

  9. Ogre骨骼动画

    转自:http://blog.csdn.net/yanonsoftware/article/details/1281516 OGRE的基本动画控制是很简单的,设置一个动画的操作是这样: // Set ...

  10. Ubuntu 14.10 下Server版本中文乱码问题

    在安装Ubuntu server 14.10 时候选择了中文版,但是装好系统发现,里面的中文有乱码,解决办法 打开 /etc/default/locale sudo nano /etc/default ...