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>&nbsp;<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">&nbsp;--&nbsp;<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>  <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" ...

随机推荐

Springmvc-crud-02错误（添加出现中文乱码）
错误: 在进行添加页面时使用post请求,输入中文时会出现乱码原因: post请求不支持gbk格式,使用字符编码过滤器,设置为UTF-8编码即可注意配置请求的字符集和响应字符集解决方案:需要放在 ...
Win10安装.Net Framework4.7及更高版本
问题描述使用VS打开项目工程时,提示未安装.net framework4.7,但在启用或关闭windows功能里已经勾选了.net framework 4.7的全部功能. 直接从网上下载.net f ...
（VLAN）理解Hybrid接口的应用
实验三:理解Hybrid接口的应用实验原理: 实验内容: 某企业二层网络使用两台S3700交换机S1和S2,且两台设备在不同的楼层.网络管理员规划了3个不同VLAN, HR部门使用VLAN 10,市 ...
Blockchain资源
程序源码: https://github.com/HuangFJ/pyeth https://www.jianshu.com/p/b72b4eb259b8
java redis 实现用户签到功能(很普通简单的签到功能)
业务需求是用户每天只能签到一次,而且签到后用户增加积分,所以把用户每次签到时放到redis 缓存里面,然后每天凌晨时再清除缓存,大概简单思想是这样的直接看代码吧如下 @Transactional @ ...
MYSQL双查询错误2
一.关键点 MYSQL双查询错误之所以产生,有两个关键点: (1)SQL语句中使用GROUP BY语句时会生成临时表: (2)RAND()在查询和存储时生成的随机数有可能不同. 补充:======== ...
rapidxml读xml文件
student.xml文件内容: int readXML(void) { rapidxml::file<> file("student.xml"); rapidxml: ...
IPv4地址被用光，IPv6将接手
截止2019年11月26号,全球所有43亿个IPv4地址已全部分配完毕,这一情况也宣告着IPv6时代的正式来临.IPv6和5G一样是关系到国家安全和战略发展的重大事情. IPv6简单来说,就是一个互联 ...
搭建一个ssm框架的maven项目需要配置的文件
单独功能需要的配置文件: 1,mybatis配置文件 mybatis-config.xml2,spring配置文件 spring-context.xml ......3,we ...
vs2013设置不生成.sdf和ipch文件
转载:https://blog.csdn.net/sinat_23338865/article/details/53393760 使用VS2013建立解决方案时,会生成SolutionName.sdf ...

highcharts Ajax 动态请求加载数据

highcharts Ajax 动态请求加载数据的更多相关文章

随机推荐

热门专题