highcharts报表

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