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.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
随机推荐
Liferay 6.2 改造系列之四:重新整理Application添加页面默认提供的Portlet清单
经过2.3两步后,剩余Portlet已经不多,添加Application页面如下: 将用不到的Portlet隐藏起来:11 Portal目录 (Portal Directory) 将内嵌Protl ...
万万没想到,3D打印居然可以做这些逆天设计
3D打印一直被冠以“高科技”头衔,似乎离我们的日常生活还很遥远.其实不然,随着技术的创新,3D打印技术逐渐深入各个领域,工业生产.商业.医学.建筑.艺术等领域都能看到3D打印技术的影子.它将会改变我们 ...
C#获取指定日期为一年中的第几周
/// /// 获取指定日期,在为一年中为第几周 /// /// 指 ...
玩玩hibernate
这几天师兄,让我玩玩hibernate,然后通过这个玩意写爬虫(spider).这一说不打紧,嗯,一个星期没有了,全都是由于配置环境,心很塞,整个星期的空闲时间都用来做重复的工作.在学习之前,我先查找 ...
HDU 5226 Tom and matrix(组合数学+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 带用户名密码的形式但包含@等特殊符号无法正常解析
正常使用git clone 的方式 git clone https://remote 使用带用户名密码的方式(可以避免后续每次都要输入用户名密码) git clone https://[usernam ...
Windows下C++删除清除map
清除单map(非嵌套map) #include #include #include using namespace s ...
MVC初识
一.MVC MVC模式(Model-View-Controller)将应用程序的实现分离的实现分离为三道不同的层: 模型层(Model): 视图层(View): 控制层(Controller): 二. ...
[转] 在图标库中,找到合适的图标 ico
作者:xlrocket链接:https://www.zhihu.com/question/19857245/answer/241696797 在图标库中,找到合适的图标 或许,一些小伙伴会有收集图标的 ...
highcharts ajax 数据格式,Highcharts ajax获取json对象动态生成报表生成 .相关推荐
- ajax解析json中的对象数组对象,在JQuery中检索json数组后获取json对象Ajax
我使用JQuery AJAX检索某些数据(标题和说明).正如你可以看到我打通的结果,并出结果的JSON数组和循环div标签中在JQuery中检索json数组后获取json对象Ajax success ...
- 自己做一个table插件 (一)Ajax获取数据后动态生成table
今天我给大家带来一个简单的JQ插件,Ajax获取数据后动态生成table.当然,有这种功能的插件有很多.著名的有DataTable.JqGrid--它们虽然功能丰富,成熟,拿来做二次开发是一个不错的选 ...
- 获取json对象的长度
<script type="text/javascript"> var myObject = {'name':'Camili', 'address':'colu ...
- 获取json对象的key
获取json对象的key值 我有一个json对象,我想获取每一个学生的信息,但是每次拿到的数据最外层的key值是随学生人数增加而变化的,并不是固定的. 所以我的思路为:先获取最外层的key,然后根据k ...
- .net core将URL请求格式化为XML或JSON(网站动态生成sitemap.xml)
.net core将URL请求格式化为XML或JSON(网站动态生成sitemap.xml) 首先设置 Startup.cs 文件 配置 ConfigureServices services.AddM ...
- JSON格式化 动态生成表格 表格转置 行列转换 Excel导出
先看效果 初始化: JSON格式化 : 生成表格-方式1 : 生成表格-方式2 : Excel导出 需要行求和.列求和功能的查看 JSON格式化 动态生成表格 表格转置 行列转换 Excel导出 行求 ...
- vue 渲染JSON数据动态生成表格组件
vue 通过渲染JSON数据动态生成表头及对应表格内容组件 <template><div id="viewDialog"><el-button typ ...
- Ajax获取Json对象绑定下拉框
分享个小实例,废话少说,直接上代码..... 贴上JS代码: Js代码 1 <script type="text/javascript"> 2 $ ...
- spring boot ajax 415,解决@RequestBody接收json对象报错415的问题
@RequestBody接收json对象报错415 前端请求: $.ajax({ url: basePath() + "/index/login.do", type : " ...
最新文章
- 用于面包板的双列直插需要多宽?
- java编程思想(第四版)第二章练习题-12
- 5月14日 游戏闯关,
- 解决yum安装时 Cannot retrieve repository metadata (repomd.xml) for repository
- BZOJ1563:[NOI2009]诗人小G(决策单调性DP)
- Selenium测试专项三班隆重开班
- python导出xlsx_使用python库xlsxwriter库来输出各种xlsx文件
- python 入门学习篇(一),呵呵呵
- Xcode版本更新后插件失效解决办法
- Jenkins进阶系列之——07更改Jenkins的主目录
- diskgenius 数据迁移_活见鬼,明明删除了数据,空间却没减少! - *IT界农民工*
- 关于perl中中文乱码的解决办法
- vscode远程配置
- Office 2016中修改正文默认字体
- SWAT模型高阶应用暨无资料地区建模、不确定分析与气候变化、土地利用对面源污染影响模型改进案例分析
- 智能时代:大数据与人工智能
- 群晖DS918+硬盘选择和阵列选择
- 在线直播系统源码,多图加载成动画的形式如何实现
- 12.2 Kruskal算法
- TrecQA 数据集简介
热门文章
- kafka manager 2.0 工具下载 已打包完成
- 启动、内存、卡顿三大分析,用户体验就用它?
- 初创公司5大Java服务困局,阿里工程师如何打破?
- WorkManager从入门到实践,有这一篇就够了
- Gartner 最新预测:全球云收入将超非云收入,云原生、低代码、SASE 继续普及
- 整理了Kafka的一些常用工具,建议收藏备用!| 博文精选
- 面试官问你MyBatis中有哪些设计模式,把这篇文章发给他
- Cloud一分钟 | 成本大增致谷歌财报蒙尘;Gartner发数据库魔力象限:阿里云成为黑马...
- mysql 闪回_MySQL数据误删除的快速解决方法(MySQL闪回工具)
- 使用react实现select_React笔记——核心概念:9.表单