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. 让DIV实现抖动效果！

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  2. 使用ContentProvider管理多媒体-----向多媒体数据中添加数据

    //为add按钮的单击事件绑定监听器 add.setOnClickListener(new OnClickListener() { @Override public void onClick(View ...

  3. 关于http断点续传相关的RANGE这个header

    <?php //1.txt内容"1234567890" socketData('127.0.0.1','/1.txt',80,"RANGE:bytes=0-0\r\ ...

  4. DataGridView绑定数据库，取得的数据插入到DataGridView指定列（一）

    实现: 点击button1,从数据库中获得数据,指定数据库的某列数据插入到DataGridView指定列 一.双击button1进入事件代码 private void button1_Click(ob ...

  5. 10款最好用的MySQL数据库客户端图形界面管理工具

    MySQL Workbench 该工具由MySQL开发,是一个跨平台的可视化数据库设计工具.它是DBDesigner4项目备受期待的替代者,它是一个本地图形化工具,支持的操作系统包括Windows.L ...

  6. 解决VS2010控制台程序运行结束不显示请按任意键继续

    在VS2010里的控制台应用程序在运行时,结果画面一闪而过,不管是用F5 还是用Ctrl + F5都是一样,导致无法看到结果. 网上有不少的办法,说是都是在程序最后加一个要程序暂停的语句( syste ...

  7. (kate)win8-64位系统下opencv-2.4.3的安装以及在visual_studio2010中配置

    环境: 操作系统:window8.1 64bit Opencv版本:OPencv-2.4.3 VS版本:vs 2010 一.安装Opencv 1.Opencv官网http://opencv.org/ ...

  8. Linux文件管理系统

    首先了解一般linux文件系统的构成. */usr/bin./bin : 存放所有用户可以执行的命令 */usr/sbin ./sbin :存放只有root可以执行的命令 */home : 用户缺省宿 ...

  9. encodeURIComponent编码2次

    最近在项目中发现前台在往anction中发送数据时进行两次encodeURIComponent,经过上网查找发现以下解释比较合理,mask过来,以供参考,非常感谢原作者!!! 两次encodeURIC ...

  10. hdu 2047

    PS:又是上课偷懒..去递推.. 代码: #include "stdio.h"#include "math.h"long long dp[55];long lo ...