$(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>