Highcharts ajax获取json对象动态生成报表生成 .
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对象动态生成报表生成 .的更多相关文章
- Highcharts axja 获取json对象动态生成报表生成
最近做个项目,项目经理想做一个统计报表,在网上查看些资料就选用Highchars 这里和大家分享下使用心得. 重点说明此代码是针对一个报表显示多个项对比显示. 直接贴代码:web端 <scrip ...
- ajax获取json对象
ajax获取json对象 ajax获取json数据,都是一个原理,设置response 的Content-Type:application/json,这样浏览器自动会解析为json对象 $result ...
- Spring mvc 下Ajax获取JSON对象问题 406错误
我在学习springmvc过程中(我的项目是配置的后缀是.html),从controller返回对象. 如果我不使用 mvc-annotation-driver,而是手动配置,AnnotationMe ...
- Spring mvc下Ajax获取JSON对象问题 406错误
spring 通过@ResponseBody标签返回JSON数据的方法都报406错: Failed to load resource: the server responded with a stat ...
- JS-利用ajax获取json数据，并传入页面生成动态tab
封装好的:ajax.js function ajax(url, fnSucc,fnFaild){ //1[创建] if(window.XMLHttpRequest){ var oAjax = new ...
- ajax获取json数据为undefined--原因解析
解决办法:var dataObj=eval("("+data+")");//转换为json对象 问题: 1. 碰到一个问题ajax成功获取json数据后,取值显 ...
- 通过Jquery中Ajax获取json文件数据
1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...
- angular js根据json文件动态生成路由状态
项目上有一个新需求,就是需要根据json文件动态生成路由状态,查阅了一下资料,现在总结一下发出来: 首先项目用到的是angular的UI-路由,所以必须引入angular.js和angular-ui- ...
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
随机推荐
- 关于Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)的问题
找不到mysql socket的问题,我最近碰到了好多次重装系统以前,我的mysql,apache,php都是自己编译安装的,当时并没有碰到这些问题,重装系统以后,我的mysql是通过yum安装的,a ...
- 使用URL访问网络资源
URL(Uniform Resource Locator)对象代表统一资源定位器,它是指向互联网“资源”的指针.资源可以是简单的文件或目录,也可以是对更复杂的对象的引用,例如对数据库或搜索引擎的查 ...
- CodeForces 86D（Yandex.Algorithm 2011 Round 2）
思路:莫队算法,离线操作,将所有询问的左端点进行分块(分成sqrt(n) 块每块sqrt(n)个),用左端点的块号进行排序小的在前,块号相等的,右端点小的在前面. 这样要是两个相邻的查询在同一块内左端 ...
- iOS解决两个静态库的冲突 duplicate symbol
http://blog.163.com/023_dns/blog/static/118727366201391544630380/ 场景: 解决TencentOpenAPI.framework与Zba ...
- Linux-C程序的存储空间布局
正文段 指的是由CPU执行的机器代码,通常,正文段是可以共享的,执行的程序在存储器中只有一个副本.通常也是只读的,防止程序本身被修改. 初始化数据段 数据段,被明确赋值的变量,比如全局变量 非初始化数 ...
- java枚举类
enum关键字用于定义枚举类,若枚举只有一个成员, 则可以作为一种单例模式的实现方式. 枚举类对象的属性不应允许被改动, 所以应该使用 private final 修饰. 枚举类的使用 priva ...
- 经典线程同步 事件Event
阅读本篇之前推荐阅读以下姊妹篇: <秒杀多线程第四篇 一个经典的多线程同步问题> <秒杀多线程第五篇 经典线程同步关键段CS> 上一篇中使用关键段来解决经典的多线程同步互斥问题 ...
- matlab 画框（一）
matlab进行图像处理之后,很多时候需要在图像上画出矩形框:如,调用matlab的某个检测函数,得到结果之后,往往需要将检测结果的矩形框画在图像上,直观.方便的进行查看:下面的代码就是这个目的: f ...
- Line计划今年全面进军中国市场：建立本地团队
北京时间6月13日下午消息,<华尔街日报>报道称,移动消息应用Line计划于今年晚些时候进军中国市场.Line将在中国建立本地团队,开发内容和功能,从而进一步开拓中国这一全球最大的移动市场 ...
- php中遍历二维数组并以表格的形式输出
一.索引数组 <?php //使用array()语句结构将联系人列表中所有数据声明为一个二维数组,默认下标是顺序数字索引 $contact1 = array( //定义外层数组 array(1, ...