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. YUM安装提示PYCURL ERROR 6 - ＂Couldn't错误的解决办法

    当编译PHP时出现如下错误时,找不到头绪 这时,打开DNS   vim /etc/resolv.conf   添加一行nameserver 192.168.1.1 完成上一步,则解决该问题 或者:ec ...

  2. python中的urlencode与urldecode

    当url地址含有中文,或者参数有中文的时候,这个算是很正常了,但是把这样的url作为参数传递的时候(最常见的callback),需要把一些中文甚至'/'做一下编码转换. 所以对于一些中文或者字符,ur ...

  3. C#压缩图片1

    using System;using System.Collections.Generic;using System.Drawing;using System.Drawing.Drawing2D;us ...

  4. ASP.NET备份还原数据库

    核心技术:using System.Data.SqlClient;using System.IO;string SqlStr1 = "Server=(local);DataBase=mast ...

  5. Android webview 取得javascript返回值

    package com.she.jyass.UI; import android.content.Context; import android.webkit.WebView; public clas ...

  6. Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at localhost are already in use.

    Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at localhost are already in use. The ...

  7. Java异常--读书笔记

    1. Java将异常分为两种:Checked异常和Runtime异常,Java认为Checked异常都是可以在编译阶段被处理的异常,所以强制程序处理所有的Checked异常:Runtime异常则无需处 ...

  8. nuget的小Tips

    1.nuget常用命令 nuget spec -a bin\Debug\DllName.dll -f //根据dll生成.nuspec文件,这样会生成无用的默认标签,比如licenseUrl.tags ...

  9. 【NOIP2015】提高组D1 解题报告

    P1978神奇的幻方 Accepted 描述 幻方是一种很神奇的 N ∗ N 矩阵:它由数字 1,2,3, … … , N ∗ N 构成,且每行.每列及两条对角线上的数字之和都相同. 当 N 为奇数时 ...

  10. Struts2 的验证

    概述 一个健壮的 web 应用程序必须确保用户输入是合法.有效的. Struts2 的输入验证 –基于 XWork Validation Framework 的声明式验证:Struts2 提供了一些基 ...