highcharts ajax 数据格式,Highcharts ajax获取json对象动态生成报表生成 .

最近做个项目，项目经理想做一个统计报表，在网上查看些资料就选用Highchars 这里和大家分享下使用心得。

重点说明此代码是针对一个报表显示多个项对比显示。

直接贴代码：web端

$(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

//赋值 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);

});

});

后台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 axja 获取json对象动态生成报表生成

最近做个项目,项目经理想做一个统计报表,在网上查看些资料就选用Highchars 这里和大家分享下使用心得. 重点说明此代码是针对一个报表显示多个项对比显示. 直接贴代码:web端

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&period;tmpl&period;js 的使用方法&lpar;1&rpar;&colon;基本语法，绑定&comma;each循环，ajax获取json数据

jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

随机推荐

Liferay 6&period;2 改造系列之四：重新整理Application添加页面默认提供的Portlet清单

经过2.3两步后,剩余Portlet已经不多,添加Application页面如下: 将用不到的Portlet隐藏起来:11   Portal目录 (Portal Directory) 将内嵌Protl ...

万万没想到，3D打印居然可以做这些逆天设计

3D打印一直被冠以“高科技”头衔,似乎离我们的日常生活还很遥远.其实不然,随着技术的创新,3D打印技术逐渐深入各个领域,工业生产.商业.医学.建筑.艺术等领域都能看到3D打印技术的影子.它将会改变我们 ...

C&num;获取指定日期为一年中的第几周

/// /// 获取指定日期,在为一年中为第几周 /// /// 指 ...

玩玩hibernate

这几天师兄,让我玩玩hibernate,然后通过这个玩意写爬虫(spider).这一说不打紧,嗯,一个星期没有了,全都是由于配置环境,心很塞,整个星期的空闲时间都用来做重复的工作.在学习之前,我先查找 ...

HDU 5226 Tom and matrix(组合数学&plus;Lucas定理)

题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5226 题意:给一个矩阵a,a[i][j] = C(i,j)(i>=j) or 0(i < ...

javaweb之监听器详解

在servlet中定义了多种类型的监听器,他们用于监听事件源分别是servletContext,httpsession,servletrequest 这三个域对象. servlet中监听器主要有三类: ...

git clone 带用户名密码的形式但包含&commat;等特殊符号无法正常解析

正常使用git clone 的方式 git clone https://remote 使用带用户名密码的方式(可以避免后续每次都要输入用户名密码) git clone https://[usernam ...

Windows下C&plus;&plus;删除清除map

清除单map(非嵌套map) #include #include #include using namespace s ...

MVC初识

一.MVC MVC模式(Model-View-Controller)将应用程序的实现分离的实现分离为三道不同的层: 模型层(Model): 视图层(View): 控制层(Controller): 二. ...

&lbrack;转&rsqb; 在图标库中，找到合适的图标 ico

作者:xlrocket链接:https://www.zhihu.com/question/19857245/answer/241696797 在图标库中,找到合适的图标 或许,一些小伙伴会有收集图标的 ...