<%-- @(#)appversion.html 2016/4/18 @author cwq --%> <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ include file="/WEB-INF/taglib.jsp"%> <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta charset="utf-8" /> <title><jc:title /></title> <meta name="description" content="overview & stats" /> <link rel="stylesheet" href="/res/ace-1.3.3/assets/css/bootstrap.css" /> <link rel="stylesheet" href="/res/ace-1.3.3/assets/css/font-awesome.css" /> <link rel="stylesheet" href="/res/ace-1.3.3/assets/css/jquery-ui.css" /> <link rel="stylesheet" href="/res/ace-1.3.3/assets/css/datepicker.css" /> <link rel="stylesheet" href="/res/ace-1.3.3/assets/css/ui.jqgrid.css" /> <link rel="stylesheet" href="/res/ace-1.3.3/assets/css/ace-fonts.css" /> <link rel="stylesheet" href="/res/ace-1.3.3/assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" /> <!--[if lte IE 9]> <link rel="stylesheet" href="/res/ace-1.3.3/assets/css/ace-part2.css" class="ace-main-stylesheet" /> <![endif]--> <!--[if lte IE 9]> <link rel="stylesheet" href="/res/ace-1.3.3/assets/css/ace-ie.css" /> <![endif]--> <!-- inline styles related to this page --> <!-- ace settings handler --> <script src="/res/ace-1.3.3/assets/js/ace-extra.js"></script> <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries --> <!--[if lte IE 8]> <script src="/res/ace-1.3.3/assets/js/html5shiv.js"></script> <script src="/res/ace-1.3.3/assets/js/respond.js"></script> <![endif]--> </head> <body class="no-skin"> <%--頂部--%> <div id="navbar" class="navbar navbar-default navbar-fixed-top"> <script type="text/javascript"> try{ace.settings.check('navbar' , 'fixed')}catch(e){} </script> <div class="navbar-container" id="navbar-container"> <jsp:include page="/WEB-INF/view/common/top.jsp"/> </div> </div> <%--end 頂部--%> <div class="main-container" id="main-container"> <script type="text/javascript"> try{ace.settings.check('main-container' , 'fixed')}catch(e){} </script> <!-- #下拉 --> <div id="sidebar" class="sidebar sidebar-fixed responsive"> <script type="text/javascript"> try{ace.settings.check('sidebar' , 'fixed')}catch(e){} </script> <div class="sidebar-shortcuts" id="sidebar-shortcuts"> <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large"> <button class="btn btn-success"> <i class="ace-icon fa fa-signal"></i> </button> <button class="btn btn-info"> <i class="ace-icon fa fa-pencil"></i> </button> <!-- #section:basics/sidebar.layout.shortcuts --> <button class="btn btn-warning"> <i class="ace-icon fa fa-users"></i> </button> <button class="btn btn-danger"> <i class="ace-icon fa fa-cogs"></i> </button> <!-- /section:basics/sidebar.layout.shortcuts --> </div> <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini"> <span class="btn btn-success"></span> <span class="btn btn-info"></span> <span class="btn btn-warning"></span> <span class="btn btn-danger"></span> </div> </div> <!-- /.sidebar-shortcuts --> <!-- 菜單 --> <jc:menu /> <!-- /.nav-list --> <!-- #section:basics/sidebar.layout.minimize --> <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse"> <i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i> </div> <!-- /section:basics/sidebar.layout.minimize --> <script type="text/javascript"> try{ace.settings.check('sidebar' , 'collapsed')}catch(e){} </script> </div> <!-- /section:basics/sidebar --> <div class="main-content"> <div class="main-content-inner"> <!-- #section:basics/content.breadcrumbs --> <div class="breadcrumbs breadcrumbs-fixed" id="breadcrumbs"> <script type="text/javascript"> try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){} </script> <jc:breadcrumb /> </div> <div class="page-content"> <div class="clearfix"></div> <div class="row" style="margin: 20px 0px"> <div class="col-sm-10"> <div id="ID_container" style="min-width:400px;height:400px"></div> </div> <div class="col-sm-2"> <div class="row"style="margin-top:10px;margin-bottom: 10px "> 統計方式： <select id="ID_userCount"> <option value="0">按日統計</option> <option value="1">按月統計</option> <option value="2">按年統計</option> </select> </div> <div class="row" style="margin-top:10px;margin-bottom: 10px "> 選擇頁碼：第 <select id="ID_userPage"> </select>頁 </div> </div> </div> <div class="clearfix"></div> <div class="row" style="margin: 20px 0px"> <div id="ID_container_shop" style="min-width:400px;height:400px"></div> </div> <div class="clearfix"></div> <div class="row" style="margin: 20px 0px"> <div class="col-sm-10"> <div id="ID_container_order" style="min-width:400px;height:400px"></div> </div> <div class="col-sm-2"> <div class="row"style="margin-top:10px;margin-bottom: 10px "> 統計方式： <select id="ID_userCount_order"> <option value="0">按日統計</option> <option value="1">按月統計</option> <option value="2">按年統計</option> </select> </div> <div class="row" style="margin-top:10px;margin-bottom: 10px "> 選擇頁碼：第 <select id="ID_userPage_order"> </select>頁 </div> </div> </div> <div class="row" style="margin: 20px 0px"> <div class="col-lg-6"> <iframe id="ID_map"class="col-lg-12" style="height: 600px;"></iframe> </div> <div class="col-lg-6"> <div id="ID_area" style="min-width:400px;height:400px"></div> </div> </div> <div class="row" style="margin: 20px 0px"> <div id="ID_sex" style="min-width:400px;height:400px"></div> </div> <div class="row" style="margin: 20px 0px"> <div id="ID_showFz" style="min-width:400px;height:400px"></div> </div> </div> </div> </div> <!-- /.main-content --> <jsp:include page="/WEB-INF/view/common/footer.jsp" flush="true" /> <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse"> <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i> </a> <!-- /.main-container --> <jsp:include page="/WEB-INF/view/common/basejs.jsp"/> <%--// jQuery--%> <%--<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>--%> <%--// Highcharts--%> <script src="/res/highcharts/highcharts.js"></script> <script type="text/javascript"> var Y = [];//y週數組 // var showUserDataTotalPage = 0 ;//第一個報表所有的行數 $(document).ready(function () { showUserData(0,1); showShopItem(); showOrderData(0,1); toMap(); showSex(); showFz(); }); /* * * @showType 0是每天 1是每月 2是每年 * @page 第幾頁 * */ var showUserData = function(showType,page){ /* * type 1安裝用戶 , 註冊的用戶 , 美容師註冊 ,訂單成單量 2商品統計 3用戶區域 4性別 5膚質 * show_type 0 安裝用戶 1 註冊的用戶 2 美容師註冊 3 訂單成單量 * 按天統計 * */ var rows = 10;//日 $.post("/statistics",{ type:1, show_type:0, page:page, rows:rows, selectType:showType },function(data1){//code 0 // console.log(data1); if(data1&&data1.totalPage){ // showUserDataTotalPage = data1.totalPage; // firstPage: true lastPage: true pageNumber: 1 pageSize: 20 totalPage: 1 totalRow: 2 for(var i=0;i<data1.totalPage;i++){ $("#ID_userPage").append("<option value="+(i+1)+">"+(i+1)+"</option>"); } } $.post("/statistics",{ type:1, show_type:1, page:page, rows:rows, selectType:showType },function(data2){ $.post("/statistics", { type:1, show_type:2, page:page, rows:rows, selectType:showType },function(data3){ if(data1.list) { var x,d1,d2,d3; x= getXY(data1,showType).split(","); d1 = Y; x = getXY(data2,showType).split(","); d2 = Y; x = getXY(data3,showType).split(","); d3 = Y; var yAxis = [ { name:"安裝用戶", data:d1 },{ name:"註冊用戶", data:d2 }, { name:"註冊美容師", data:d3 } ] // console.log(yAxis); $("#ID_container").html(""); chart("ID_container","總體信息統計",x,"人",yAxis); } }); }); }); } /* * 更改數據 * */ $("#ID_userCount").change(function(){ showUserData($(this).val(),1); }); $("#ID_userPage").change(function(){ showUserData($("#ID_userCount").val(),$("#ID_userPage").val()); }); /* * 生成 數組 用"|"分割 * @show_type 0 是每天 1是每月 2是每年 * */ var getXY = function(data1,show_type){ var x="";//x 軸 var y =[]; for (var i = 0; i < data1.list.length; i++) { var timeStr = data1.list[i].data_time; var count = data1.list[i].count; if(show_type==0)timeStr = timeStr.substr(0, 4) + "年" + timeStr.substr(4, 2) + "月" + timeStr.substr(6, 2); if(show_type==1)timeStr = timeStr.substr(0, 4) + "年" + timeStr.substr(4, 2) + "月"; if(show_type==2)timeStr = timeStr.substr(0, 4) + "年"; x = i == 0 ? timeStr : x + "," + timeStr; y[i] = parseInt(count); } Y = y; return x; } /* * * 報表數據折線圖輸出 * @id 輸出的id * @ xAxis x 軸一維數組 * @title 標題 * @yAxis json數組 [{name:"",data:[]},{}] * */ var chart = function(id,title,xAxis,company,yAxis){ $('#'+id).highcharts({ title: { // text: '總體信息統計', text:title, x: -20 //center }, xAxis: { categories: xAxis }, yAxis: { title: { text: company }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { valueSuffix: company }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series:yAxis }); $("#"+id+" text:last").hide(); } /* * 商品雙餅圖 * */ var showTwoArrData; var showTwokey; /* * @categoriesArrKey 關鍵字 * @categoriesArrValue 分類總數據 * */ var f_getTwoData = function(categoriesArrKey,categoriesArrValue){ var resultInt = []; var resultName = ""; var i =0; $(showTwoArrData).each(function(key,value){ var boole = false; $(value).each(function(k,v){ if(k==0) { if(categoriesArrKey==v) boole=true; } if(k==1&&boole){ resultName = resultName==""?v:resultName+","+v; } if(k==2&&boole){ resultInt[i] = v; i++; } }); }); showTwokey = resultInt; return resultName; } var showShopItem = function(){ // ID_container_shop var categoriesArrKey = [];//第一個圓的name var categoriesArrValue = [];//第一個圓的數值 var categoriesArrlenght = 0; $.post("/statistics",{ type:2, queryType:1 },function(data1){ $(data1.data).each(function(key,value){ $(value).each(function(k,v){ if(k==0) categoriesArrKey[key] = v; if(k==2){ categoriesArrValue[key] = v; categoriesArrlenght = categoriesArrlenght+v; } }); }); $.post("/statistics",{ type:2, queryType:0 },function(data2){ showTwoArrData = data2.data; var colors = Highcharts.getOptions().colors, categories = categoriesArrKey,data =[]; // console.log(categoriesArrKey); for(var i =0;i<categoriesArrValue.length;i++){ // console.log( f_getTwoData(categoriesArrKey[i],categoriesArrValue[i])); var tempStr = f_getTwoData(categoriesArrKey[i],categoriesArrValue[i]); data[i]={ y:categoriesArrValue[i], color: colors[i], drilldown: { name: categoriesArrKey[i], categories:tempStr.split(",") , data:showTwokey, color: colors[i] } }; } var browserData = [],versionsData = [], i, j, dataLen = data.length, drillDataLen, brightness; // return; // Build the data arrays for (i = 0; i < dataLen; i += 1) { browserData.push({ name: categories[i], y: data[i].y, color: data[i].color }); drillDataLen = data[i].drilldown.data.length; for (j = 0; j < drillDataLen; j += 1) { brightness = 0.2 - (j / drillDataLen) / 5; versionsData.push({ name: data[i].drilldown.categories[j], y: data[i].drilldown.data[j], color: Highcharts.Color(data[i].color).brighten(brightness).get() }); } } // Create the chart $('#ID_container_shop').highcharts({ chart: { type: 'pie' }, title: { text: '商品總體信息統計' }, plotOptions: { pie: { shadow: false, center: ['50%', '50%'] } }, tooltip: { valueSuffix: '%' }, series: [{ name: '商品類', data: browserData, size: '60%', dataLabels: { formatter: function () { return this.y > 5 ? this.point.name : null; }, color: 'white', distance: -30 } }, { name: '商品', data: versionsData, size: '80%', innerSize: '60%', dataLabels: { formatter: function () { // display only if larger than 1 return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null; } } }] }); $("#ID_container_shop text:last").hide(); }); }); } /* * * @showType 0是每天 1是每月 2是每年 * @page 第幾頁 * */ var showOrderData = function(showType,page){ /* * type 1安裝用戶 , 註冊的用戶 , 美容師註冊 ,訂單成單量 2商品統計 3用戶區域 4性別 5膚質 * show_type 0 安裝用戶 1 註冊的用戶 2 美容師註冊 3 訂單成單量 * 按天統計 * */ var rows = 10;//日 $.post("/statistics",{ type:1, show_type:3, page:page, rows:rows, selectType:showType },function(data1){//code 0 // console.log(data1); if(data1&&data1.totalPage){ // showUserDataTotalPage = data1.totalPage; // firstPage: true lastPage: true pageNumber: 1 pageSize: 20 totalPage: 1 totalRow: 2 for(var i=0;i<data1.totalPage;i++){ $("#ID_userPage_order").append("<option value="+(i+1)+">"+(i+1)+"</option>"); } } if(data1.list) { var x,d1; x= getXY(data1,showType).split(","); d1 = Y; var yAxis = [ { name:"成單量", data:d1 } ] // console.log(yAxis); $("#ID_container_order").html(""); chart("ID_container_order","總體成單量統計",x,"成單量",yAxis); } }); } /* * 更改數據 * */ $("#ID_userCount_order").change(function(){ showOrderData($(this).val(),1); }); $("#ID_userPage_order").change(function(){ showOrderData($("#ID_userCount_order").val(),$("#ID_userPage_order").val()); }); /* * 生成地圖 * */ var mapId = 0; var toMap = function(){ $("#ID_map").attr("src","/statistics/map");//地圖加載 $.post("/statistics",{ type:3, queryType:mapId },function(GetData) { // console.log(GetData); var brandsData = []; var brands = []; var toName="",toValue="",brandsDataLenth=0; if(GetData.data){ $(GetData.data).each(function(k,v){ $(v).each(function(key,value){ if(key==0) toName = toName==""?value:toName+","+value; if(key==1){ toValue = toValue==""?value:toValue+","+value; brandsDataLenth = brandsDataLenth+value; } }); }); } var tempName = toName.split(","); var tempValue = toValue.split(","); for(var i=0;i<tempName.length;i++){ brandsData.push( { // drilldown: "Microsoft Internet Explorer " // name: "Microsoft Internet Explorer " // y: 53.61 name:tempName[i].replace("省","").replace("市",""), drilldown:tempName[i].replace("省","").replace("市",""), // y:parseFloat((parseInt(tempValue[i])/brandsDataLenth).toFixed(2)) y:parseInt(tempValue[i]) } ); } getBar(brandsData); }); } /* * 生成 區域柱狀圖 * */ var getBar = function(brandsData){ $('#ID_area').highcharts({ chart: { type: 'bar' }, title: { text: '區域統計' }, xAxis: { type: 'category' }, legend: { enabled: false }, yAxis: { title: { text: '' } }, plotOptions: { series: { borderWidth: 0, dataLabels: { enabled: true, format: '{point.y:.1f}%' } } }, tooltip: { headerFormat: '<span style="font-size:11px">{series.name}</span><br>', pointFormat: '<span style="color:{point.color}">{point.name}</span>: 佔<b>{point.y:.2f}%</b> <br/>' }, series: [{ name: '區域', colorByPoint: true, data: brandsData }] }); $("#ID_area text:last").hide(); } /* * 男女比例 * */ var showSex = function(){ $.post("/statistics",{ type:4 },function(GetData) { // console.log(GetData.data[0]); // 0女 1 男 var sexData = []; var toName="",toValue=""; if(GetData.data){ $(GetData.data).each(function(k,v){ $(v).each(function(key,value){ // if(key==0) toName = toName==""?value:toName+","+value if(key==1) toValue = toValue==""?value:toValue+","+value }); }); } // var tempName = toName.split(","); var tempValue = toValue.split(","); sexData.push( ['女', parseInt(tempValue[0])], { name: '男', y: parseInt(tempValue[1]), sliced: true, selected: true } ); // console.log(sexData) $('#ID_sex').highcharts({ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: '用戶男女比例' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %', } } }, series: [{ type: 'pie', name: '佔', data:sexData // data: [ // ['男', 45.0], // { // name: '女', // y: 12.8, // sliced: true, // selected: true // } // ] }] }); $("#ID_sex text:last").hide(); }); } /* * 膚質 * */ var showFz = function(){ $.post("/statistics",{ type:5 },function(GetData) { // console.log(GetData); var sexData = []; var toName = "", toValue = ""; if (GetData.data) { $(GetData.data).each(function (k, v) { $(v).each(function (key, value) { if(key==0) toName = toName==""?value:toName+"|"+value if (key == 1) toValue = toValue == "" ? value : toValue + "|" + value }); }); } var tempName = toName.split("|"); var tempValue = toValue.split("|"); for(var i=0;i<tempName.length;i++) { if(i==0){ sexData.push( { name: tempName[0], name2:subString(tempName[i],20,true), y: parseInt(tempValue[0]), sliced: true, selected: true } ); }else{ sexData.push( { name: tempName[i], name2:subString(tempName[i],20,true), y: parseInt(tempValue[i]) } ); } } // console.log(sexData) $('#ID_showFz').highcharts({ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: '膚質統計' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name2}</b>: {point.percentage:.1f} %', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } } } }, series: [{ type: 'pie', name: '佔', data: sexData }] }); $("#ID_showFz text:last").hide(); }); } //數字或字母 var checknum = function (value) { var Regx = /^[A-Za-z0-9]*$/; if (Regx.test(value)) { return true; } else { return false; } } //字段截取 var subString = function (str, len, hasDot) { if(checknum(str)){ var newLength = 1; var newStr = ""; var singleChar = ""; for (var i = 0; i < str.length; i++) { singleChar = str.charAt(i).toString(); newLength++; if (newLength > len) { break; } newStr += singleChar; } if (hasDot && strLength > len) { newStr += "..."; } return newStr; } else{ var newLength = 0; var newStr = ""; var chineseRegex = /[^\x00-\xff]/g; var singleChar = ""; var strLength = str.replace(chineseRegex, "**").length; for (var i = 0; i < strLength; i++) { singleChar = str.charAt(i).toString(); if (singleChar.match(chineseRegex) != null) { newLength += 2; } else { newLength++; } if (newLength > len) { break; } newStr += singleChar; } if (hasDot && strLength > len) { newStr += "..."; } return newStr; } } //alert(subString("js233333333333333",20,true) </script> </body> </html>
map.jsp
<%-- Created by IntelliJ IDEA. User: cwq Date: 2016/5/14 Time: 14:46 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <!DOCTYPE html> <html lang="en"> <head> <title></title> </head> <body> <script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script src="https://code.highcharts.com/maps/highmaps.js"></script> <script src="https://code.highcharts.com/maps/modules/exporting.js"></script> <script src="/res/highcharts/cn-all-sar-taiwan.js"></script> <div id="container_map" style="min-width:400px;height:400px"></div> <script> $(function () { // Prepare demo data $.post("/statistics",{ type:3, queryType:window.parent.mapId },function(GetData) { // console.log(GetData); var data = []; var toName="",toValue=""; if(GetData.data){ $(GetData.data).each(function(k,v){ $(v).each(function(key,value){ if(key==0) toName = toName==""?value:toName+","+value if(key==1) toValue = toValue==""?value:toValue+","+value }); }); } var tempName = toName.split(","); var tempValue = toValue.split(","); for(var i=0;i<tempName.length;i++){ data.push( { name:tempName[i].replace("省","").replace("市",""), value:parseInt(tempValue[i]) } ); } // console.log(data); // { // name: "廣東", // value: 1 // }, { // name: "北京", // value: 1 // } // ]; // Initiate the chart $('#container_map').highcharts('Map', { title: { text: '區域人數分佈' }, // subtitle : { // text : 'Source map: <a href="https://code.highcharts.com/mapdata/countries/cn/custom/cn-all-sar-taiwan.js">China with Hong Kong, Macau, and Taiwan</a>' // }, mapNavigation: { enabled: true, buttonOptions: { verticalAlign: 'bottom' } }, colorAxis: { min: 0 }, series: [{ data: data, mapData: Highcharts.maps, joinBy: 'name', name: '地區人數', states: { hover: { color: '#BADA55' } }, dataLabels: { enabled: true, format: '{point.name}' } }] }); $("#container_map text:last").hide(); }); }); </script> </body> </html>
cn-all-sar-taiwan.js<script src="https://code.highcharts.com/mapdata/countries/cn/custom/cn-all-sar-taiwan.js"></script>
