highcharts Ajax 动态请求加载数据
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css"> </style>
<meta name="decorator" content="default" />
<link href="${ctxStatic }/modules/exhi/css/exhitab.css?v=${version}" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${ctxStatic }/layer/layer.js"></script>
<script type="text/javascript" src="${ctxStatic }/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="${ctxStatic }/highcharts/highcharts.js"></script>
<script type="text/javascript" src="${ctxStatic }/highcharts/exporting.js"></script>
<script type="text/javascript"> $(function () {
load();
}); function selectData(){
var startTime = $("#startTime").val();
var endTime = $("#endTime").val(); var data={"startTime":startTime,"endTime":endTime};
load(data);
}
var load = function(data){
$.post("${ctx}/loadData",data,function(result){
var seriesData = eval(result.series);
var categoriesData = eval(result.categories); $('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: '广州万秀网后台数据统计'
},
subtitle: {
//text: 'Source: WorldClimate.com'
},
xAxis: {
categories: categoriesData
},
yAxis: {
min: 0,
title: {
text: '数量 (个)'
}
},
tooltip: {
shared: true,
formatter: function() { var dataVal="";
for(var i = 0;i<this.points.length;i++){ var series=this.points[i].series.name.replace(/\d+/g,'');
var s=series.replace('<br/>','') dataVal +=
s+":" +this.points[i].y+ "<br>";
} return dataVal;
} },
credits: {//去掉默认的highcharts.com
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
}
},
series: seriesData
});
},"json");
} </script>
<body>
<table width="87%">
<tr>
<td align="right"><label></label> <input type="text" value="<fmt:formatDate value="${startTime }"/>" id="startTime" class="input-mini Wdate" onclick="WdatePicker({dateFmt:'yyyy-MM',isShowClear:false,maxDate:'#F{$dp.$D(\'endTime\')||\'%y-%M\'}' });" readonly="true" style="margin-bottom: 0px"> -- <input
type="text" id="endTime" value="<fmt:formatDate value="${endTime }"/>" class="input-mini Wdate" onclick="WdatePicker({dateFmt:'yyyy-MM',isShowClear:false,minDate: '#F{$dp.$D(\'startTime\')}',maxDate:'%y-%M' });" readonly="true" style="margin-bottom: 0px"></td>
<td ><input id="btnSubmit" class="btn btn-primary" type="submit" value="查询" onclick="return selectData();"/>
</li></td>
</tr>
</table>
<div id="container" style="min-width:700px;height:400px;width:75%;"></div> </body>
</html> //后台java 代码
/**
* 异步加载后台首页
* @param model
* @return
*/
@ResponseBody
@RequestMapping("/loadData")
public Map<Object, Object> loadData(HttpSession session, HttpServletResponse response, Model model, HttpServletRequest request,String startTime,String endTime) {
AdminIndexData adminIndexData = new AdminIndexData();
if(("".equals(startTime) || startTime==null) || ("".equals(endTime) || endTime == null)){
adminIndexData.setStartTime(adminIndexService.getNewDate("yyyy-MM", 11));//开始时间默认为当前时间的前11个月的时间
adminIndexData.setEndTime(adminIndexService.getDate("yyyy-MM",0));//结束时间为当前时间
}else{
adminIndexData.setStartTime(startTime);
adminIndexData.setEndTime(endTime);
}
HashMap<Object, Object> map = Maps.newHashMap();
List<Chart> listChar = new ArrayList<Chart>();
List<AdminIndexData> zhuBanFanList= RedisCacheManager.getAllZhuBanFanCount(model, "zhuBanfangcount", adminIndexService,adminIndexData);// 按年月份统计展会主办方
List<AdminIndexData> daiLiShangList = RedisCacheManager.getAllDaiLiShang(model, "daiLiShanCount", adminIndexService,adminIndexData);// 按年月份统展会代理商
List<AdminIndexData> accountList = RedisCacheManager.getAllCountAccount(model, "accountCount", adminIndexService,adminIndexData);//按年月份统计用户账号
List<AdminIndexData> exhiMainList = RedisCacheManager.getAllExhiMain(model, "exhiMainCount", adminIndexService,adminIndexData);//按年月份统计展览
List<AdminIndexData> huiYiMainList = RedisCacheManager.getAllHuiYiMain(model, "huiYiMainCount", adminIndexService,adminIndexData);//按年月份统计会议
List<AdminIndexData> orderList = RedisCacheManager.getAllOrder(model, "orderCount", adminIndexService,adminIndexData);//按年月份统计订单 listChar.add(RedisCacheManager.getStatisticalData(zhuBanFanList, "展会主办方",adminIndexData.getStartTime(),adminIndexData.getEndTime(),adminIndexService,adminIndexData));//将主办方的数据放到集合里面
listChar.add(RedisCacheManager.getStatisticalData(daiLiShangList, "展会代理商",adminIndexData.getStartTime(),adminIndexData.getEndTime(),adminIndexService,adminIndexData));//将展会代理商的数据放到集合里面
listChar.add(RedisCacheManager.getStatisticalData(accountList, "用户账号",adminIndexData.getStartTime(),adminIndexData.getEndTime(),adminIndexService,adminIndexData));//将用户账号的数据放到集合里面
listChar.add(RedisCacheManager.getStatisticalData(exhiMainList, "展览",adminIndexData.getStartTime(),adminIndexData.getEndTime(),adminIndexService,adminIndexData));//将展览总数的数据放到集合里面
listChar.add(RedisCacheManager.getStatisticalData(huiYiMainList, "会议",adminIndexData.getStartTime(),adminIndexData.getEndTime(),adminIndexService,adminIndexData));//将会议总数的数据放到集合里面
listChar.add(RedisCacheManager.getStatisticalData(orderList, "订单",adminIndexData.getStartTime(),adminIndexData.getEndTime(),adminIndexService,adminIndexData));//将订单总数的数据放到集合里面 map.put("series", listChar);
map.put("categories", adminIndexService.getYearMonth(adminIndexData.getStartTime(), adminIndexData.getEndTime()));
return map;
}
highcharts Ajax 动态请求加载数据的更多相关文章
- Ajax动态滚动加载数据
看新浪微博,人人网都有这样的效果:滚动条滚动到最下面的时候,新的数据就被自动加载出来了,今天亲自尝试了一下这个效果的实现. 最开始在CSDN上写了一版,功能比较简单,今天又增加了一个小功能:翻页到指定 ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- ajax按楼层加载数据
代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...
- 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据
瀑布流加载显示数据,在当下已经用的很普遍,尤其是我们在做网上商城时,在产品列表页面已经被普遍使用. 对于实现瀑布流布局的解决方案主要有以下两种方式: 1.对每一条显示数据使用绝对定位+浮动的方式,这样 ...
- Ajax页面的加载数据与删除
1.数据库找一张表: 颜色表2.主页面主页面的代码用到tbody:TBODY作用是:可以控制表格分行下载,从而提高下载速度.(网页的打开是先表格的的内容全部下载完毕后,才显示出来,分行下载可以先显示部 ...
- Ajax 滚动异步加载数据
第一种情况:单个div滚动 HTML <body> <!-- search start --> <div class="search" #if($m_ ...
- php+ajax实现拖动滚动条分批加载请求加载数据
HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- php ajax 下拉加载数据
视图 <html> <head> <title>健康知识</title> <script type="text/javascript&q ...
- thinkphp5.0调用ajax无刷新加载数据
控制器层那边就是调数据返回,这里不再赘述,视图层页面ajax部分写法如下 function shanchu(obj) { var code = $(obj).attr("code" ...
随机推荐
- Wx-小程序-组件式开发之Vant
开始:https://youzan.github.io/vant-weapp/#/intro 小程序开发者工具中 -->工具栏-->构建npm 一.初始化package.json npm ...
- 五分钟学Java：打印Java数组最优雅的方式是什么？
在逛 Stack Overflow 的时候,发现了一些访问量像安第斯山一样高的问题,比如说这个:打印 Java 数组最优雅的方式是什么?访问量足足有 220W+,想不到啊,这么简单的问题竟然有这么多 ...
- Python--比较两个字典部分value是否相等（可以用于接口自动化）
eg:例如你调用了一个新增的接口,以往功能测试的话,你再web端新增一个店铺之后,你肯定要去数据库中查看,这些数据插入的对不对,是否正确的插入了每个字段 # 比较两个字典部分是否相等 def comp ...
- 【PAT甲级】1097 Deduplication on a Linked List (25 分)
题意: 输入一个地址和一个正整数N(<=100000),接着输入N行每行包括一个五位数的地址和一个结点的值以及下一个结点的地址.输出除去具有相同绝对值的结点的链表以及被除去的链表(由被除去的结点 ...
- c++高斯消元法求解线性方程组
#include<iostream> #include<math.h> #include<string.h> using namespace std; #defin ...
- github 创建gitlab每次提交都要输入账号
在使用git提交代码到github的时候,经常要求输入用户名和密码,类似这种: 除了在 github 上添加 SSH key 网上有这么一种解决方法:使用git提交到github,每次都要输入用户名和 ...
- KK音标
目录 KK音标 参考 音标发音 音标口诀 五个规则 KK音标
- 页面分享功能，分享好友、朋友圈判断，用share_type做标记 这里用的是jweixin-1.3.2.js
这里用的是jweixin-1.3.2.js trigger: function (res) { //判断分享的状态,好友.朋友圈 localStorage.setItem("share_ty ...
- Vue——前端生成二维码
与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo的功能. 方式一:qrcode npm np ...
- "%Error opening tftp://255.255.255.255/network config"
问题:服务配置错误消息(Service Configuration Error Messages) 有时,在通过Cisco IOS软件启动Cisco设备期间,会显示与这些类似的错误消息: %Error ...