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. spring mvc与mybatis收集到博客

    mybaits-spring 官方教程 http://mybatis.github.io/spring/zh/ SpringMVC 基础教程 框架分析 http://blog.csdn.net/swi ...

  2. linux修改系统时间和linux查看时区、修改时区的方法

    一.查看和修改Linux的时区 1. 查看当前时区命令 : "date -R" 2. 修改设置Linux服务器时区方法 A命令 : "tzselect" 方法 ...

  3. NOIP 2006 解题报告

    第一题: 在Mars星球上,每个Mars人都随身佩带着一串能量项链.在项链上有N颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记对应着某个正整数.并且,对于相邻的两颗珠子,前一颗珠子的尾标记一定 ...

  4. 如何让DIV在窗口水平和垂直居中

    本实例以新文档开始 2 先放置一个div,并且设置class名为aa,赋予它css属性: width:0;height:0;position:fixed;left:50%;rigth:50%;top: ...

  5. 学好C++必须要注意的十八个问题

    转自  http://blog.chinaunix.net/uid-7396260-id-2056691.html 一.#include "filename.h"和#i nclud ...

  6. iOS 高效添加圆角效果实战讲解

    圆角(RounderCorner)是一种很常见的视图效果,相比于直角,它更加柔和优美,易于接受.但很多人并不清楚如何设置圆角的正确方式和原理.设置圆角会带来一定的性能损耗,如何提高性能是另一个需要重点 ...

  7. how to reset mac root password

    Reset 10.5 Leopard & 10.6 Snow Leopard password Power on or restart your Mac. At the chime (or g ...

  8. C++二叉查找树实现及转化为双向链表

    二叉树首先要有树节点 template<class T> class BinaryNode { public: T element; BinaryNode *left; BinaryNod ...

  9. OpenCV之响应鼠标（二）：函数cvSetMouseCallback()和其副程式onMouse()的使用(OpenCV2.4.5)

    每當滑鼠在視訊視窗介面點擊一下的時候,都會有固定三個動作 1.點擊(Click) 2.放開(Down)3.滑動(move) 因此,程式執行滑鼠在點擊的時候onMouse()都會連續跑三次,代表滑鼠在點 ...

  10. Intellij导入外部的jar

    File -> Project Structure (ctrl + shift + alt + s ) -> Module -> Dependencies -> Add... ...