highcharts Ajax 动态请求加载数据-CSDN博客

<%@ 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" οnclick="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" οnclick="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="查询" οnclick="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;
    }