highcharts Ajax 動態請求加載數據

本文轉載自查看原文 2016-01-11 17:57 5379 JavaWeb

<%@ 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;
    }

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue2-highcharts 動態加載數據頁面滾動使用ajax動態加載數據 Highcharts、AJAX、JSON、JQuery實現動態數據交互顯示圖表柱形圖 highcharts聯合jquery ajax 后端取數據 highcharts動態獲取數據生成圖表問題 Highcharts+Ajax+Json動態生成報表並且實時刷新 echarts在.Net中使用實例(二) 使用ajax動態加載數據 ajax請求的頁面數據時而加載成功時而需要刷新才能加載成功問題分析 ajax請求接口數據 ajax請求ashx數據