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' ...
随机推荐
- java四大名著
java编程思想effective Javajava核心技术java编程语言 外加: 深入理解java虚拟机 自己动手写java虚拟机 java并发编程的艺术 java常用算法手册 其他计算机需要看 ...
- 转: CSS中overflow的用法
Overflow可以实现隐藏超出对象内容,同时也有显示与隐藏滚动条的作用,overflow属性有四个值:visible (默认), hidden, scroll, 和auto.同样有两个overflo ...
- 在linux终端下打开pdf文件
已经使用linux有很长的时间了,感觉linux的终端使用起来非常的方便.但是怎么在linux下用命令的方式打开pdf文件呢.我查了一下,打开pdf的命令是: evince [filename] 例如 ...
- 在Tomcat下配置Solr 4.x 版本
solr是一款非常优秀的全文检索服务器,最新版本在配置和前台页面上都做了较大的改动, 所以对用惯了老版本的朋友们来说,再重新配置新版本的solr,无疑又是一件痛苦的事情. 配置环境:windows ...
- Oracle top N实现
在Oracle中实现select top N:由于Oracle不支持select top 语句,所以在Oracle中经常是用order by 跟rownum的组合来实现select top n的查询. ...
- ByteArray
ByteArray:属性endian:String == Endian.BIG_ENDIAN/Endian.LITTLE_ENDIAN.length:uint ByteArray的字节数positio ...
- 【转发】Linux系统下安装rz/sz命令及使用说明
对于经常使用Linux系统的人员来说,少不了将本地的文件上传到服务器或者从服务器上下载文件到本地,rz / sz命令很方便的帮我们实现了这个功能,但是很多Linux系统初始并没有这两个命令.今天,我们 ...
- iOS闪烁效果工具 GlitchLabel
GlitchLabel 用于给文字添加闪烁效果,效果图如下: 开发环境: iOS 7.0+ Swift 2.2 Xcode 7 示例代码:https://www.yuedecaifu.com 1 2 ...
- git——学习笔记（二）远程仓库
GIT杀手锏之一——远程仓库 拥有远程仓库的两个办法 1:搭一个Git服务器 2:在GitHub上免费托管的Git仓库 本地仓库 远程仓库 一.在GitHub上免费托管的Git仓库 电脑: 1. ...
- iOS 中 #import同@class之间的区别
很多刚开始学习iOS开发的同学可能在看别人的代码的时候会发现有部分#import操作写在m文件中,而h文件仅仅使用@class进行声明,不禁纳闷起来,为什么不直接把#import放到h文件中呢? 这是 ...