$(document).ready(function(){ $('#ss').datagrid({ title:'当前位置:运营数据——>用户注册', url:'./list.do', //定义这个数据表格的数据来源 method:"post", rownumbers:true, //显示序列号 singleSelect:true, //只允许选择一行 striped:true,//斑马线 loadMsg:'正在加载中,请稍等...', multiSort:true, sortOrder:'asc' , pageList:[20,30,40,60], //页面导航展示的页码 fitColumns:true, columns:[[ {checkbox:true}, {field:'registDate',title: '日期',width:300,align:'center',formatter:function(value,row,index){ if(value!="" && value!=null){ var str=value.substring(0,value.indexOf(':')); return str; }else{ return ""; } }}, {field:'registCount',title:'注册账号人数',width:300, align:'center'}, {field:'createCount',title:'创建角色人数',width:300,align:'center'}, {field:'dateTime',title:'时间日期',width:300,align:'center'} ]], onLoadSuccess:function(data){ var page = $('#ss').datagrid('getPager'); if(data.total==0 && data.msg!=null){ $('#ss').datagrid('appendRow',{ "registCount": '<font color=red>'+data.msg+'</font>' }); page.hide(); $(".datagrid-cell-c1-registCount").css({"width":"250"}); }else{ page.show(); } showChart(data); }, pagination:true, toolbar:'#toolbar'}); var pager = $('#ss').datagrid('getPager'); pager.pagination({ showPageList:true, beforePageText: '第',//页数文本框前显示的汉字 afterPageText: '页 共 {pages} 页', displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录' }); $('#tablelist').css('display','block'); //初始时默认选中第一项,根据默认选中的值联动获取区服 var id= jQuery("#nPlatformID option:selected").val(); if(id!=null && id !=""){ $('#nAreaID').combobox({ url:"./getserver.do?platform="+id, valueField:'serverid', textField:'serverName' , onLoadSuccess:function(){ //加载完成后,设置选中第一项 var val = $(this).combobox("getData"); for (var item in val[0]) { if (item == "serverid") { $(this).combobox("select", val[0][item]); } } } }); } //根据平台获得服务数据(二级联) $('#nPlatformID').combobox({ onSelect:function(newValue, oldValue){ var nPlatformID = $('input[name=nPlatformID]').val(); server.combobox({ disabled: false, url:"./getserver.do?platform="+nPlatformID, valueField: 'serverid', textField: 'serverName' }).combobox('clear'); } }); var server = $('#nAreaID').combobox({ valueField:'serverid', textField:'serverName', editable:false }); //将起始时间默认为一周制 var startTime =""; var date = new Date(); startTime=date.toJSON().substr(0,10) $('#strDate').datebox('setValue',startTime); }); var chart; //显示柱状图 function showChart(data){ var d1=new Array();//人数(人/位) var d3=0; var d4=0; var d5=0; var rows=data.rows; $.each(data.rows,function(i,item){ d1.push(item.registDate); d3+=item.registCount; d4+=item.createCount; d5+=item.enterCount; }); if(d1.length>0){ d1.reverse(); //把倒序转成升序 } if(rows.length>0){ var table = $(".datagrid-btable"); var row = $("<tr ></tr>"); var td0 = $("<td ></td>"); var td = $("<td style=text-align:center;font-weight:bold;font-size:18px;color:red>汇总</td>"); var td1 = $("<td style=text-align:center;font-weight:bold;font-size:18px;color:red>"+d3+"</td>"); var td2 = $("<td style=text-align:center;font-weight:bold;font-size:18px;color:red>"+d4+"</td>"); var td3 = $("<td style=text-align:center;font-weight:bold;font-size:18px;color:red>"+d5+"</td>"); row.append(td0); row.append(td); row.append(td1); row.append(td2); row.append(td3); table.append(row); } chart=new Highcharts.Chart({ chart: { renderTo: 'container', //放置图表的容器 defaultSeriesType: 'column', inverted: false }, title: { text: '服务器每日用户注册情况', style:{} }, subtitle: { text: '按人数统计' //图标的副标题 }, legend: { // 【图例】位置样式 layout: 'horizontal', // 【图例】显示的样式:水平(horizontal)/垂直(vertical) backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white', //'#FFFFFF', borderColor: '#CCC', borderWidth: 1, align: 'right',//center // floating: true, x: -100, verticalAlign: 'top', enabled:true, y: 20, shadow: false }, xAxis: { categories: ['注册账号人数','创建角色人数','在线人数'], //X轴的坐标值 labels: { // rotation: -45, align: 'center', style: {font: 'normal 8px 宋体'} } }, yAxis: { min: 0, title : { text: '人数(人/位)' //Y轴坐标标题 } }, stackLabels: { enabled: true, style: { fontWeight: 'bold', color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' } } , tooltip: { formatter: function() { // 当鼠标悬置数据点时的格式化提示 return '<b>'+ this.series.name +'</b><br/>'+ '总人数:' + Highcharts.numberFormat(this.y, 1)+'人<br/>当前用户操作:'+ this.x +''; } }, credits: { enabled: false }, plotOptions: { column: { stacking: 'normal', dataLabels: { enabled: true, color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' } } }, series: [{ name:"服务器每日用户注册情况", data: [d3,d4,d5] }] }); } //获得将时间转换成yyyy-MM-dd HH:mm:ss的格式字符串。 function formatter_Time(value,row,index){ var datetime = new Date(); datetime.setTime(value); var year = datetime.getFullYear(); var month = datetime.getMonth()+1; var date = datetime.getDate(); var hours = datetime.getHours(); var minutes = datetime.getMinutes(); var seconds = datetime.getSeconds(); var curDateTime= year; if(month>9) curDateTime = curDateTime +"-"+month; else curDateTime = curDateTime +"-0"+month; if(date>9) curDateTime = curDateTime +"-"+date; else curDateTime = curDateTime +"-0"+date; if(hours>9) curDateTime = curDateTime +" "+hours; else curDateTime = curDateTime +" 0"+hours; if(minutes>9) curDateTime = curDateTime +":"+minutes; else curDateTime = curDateTime +":0"+minutes; if(seconds>9) curDateTime = curDateTime +":"+seconds; else curDateTime = curDateTime +":0"+seconds; return curDateTime; } <script type="text/javascript"> $(document).ready(function(){ $("#aa").click(function(){ $("#panel1").slideToggle("slow"); $(this).toggleClass("active"); return false; }); </script> <!--jsp 报表统计 :柱状图 --> <a href="javascript:void(0)"class="easyui-linkbutton" id="aa" plain="true" iconCls="icon-down">打开/隐藏报表</a> <div style="display:block;" id="panel1"> <div id="container" style="min-width:700px;height:305px"></div> </div>
highcharts报表
猜你喜欢
转载自nice2230.iteye.com/blog/2237872
今日推荐
周排行