highchart

最新推荐文章于 2022-03-12 22:41:52 发布

「已注销」

最新推荐文章于 2022-03-12 22:41:52 发布

阅读量453

点赞数

 <%@ page language="java" contentType="text/html; charset=UTF-8"  
     pageEncoding="UTF-8"%>  
     <%@ include file="/WEB-INF/include/taglib.jsp"%>  
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 <title>进销存管理系统</title>  
 <script type="text/javascript" src="${ctx}/static/js/jquery-1.11.1.min.js"></script>  
 <script type="text/javascript" src="${ctx}/static/js/highcharts.js"></script>  
 <script type="text/javascript" src="${ctx}/static/js/exporting.js"></script>  
 <style type="text/css">  
 ${demo.css}  
 </style>  
 <script type="text/javascript">  
 Date.prototype.format = function(format){   
     var o = {   
     "M+" : this.getMonth()+1, //month   
     "d+" : this.getDate(), //day   
     "h+" : this.getHours(), //hour   
     "m+" : this.getMinutes(), //minute   
     "s+" : this.getSeconds(), //second   
     "q+" : Math.floor((this.getMonth()+3)/3), //quarter   
     "S" : this.getMilliseconds() //millisecond   
     }  
   
     if(/(y+)/.test(format)) {   
     format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));   
     }  
   
     for(var k in o) {   
     if(new RegExp("("+ k +")").test(format)) {   
     format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));   
     }   
     }   
     return format;   
  }  
    
 $(function () {  
     GetseriesValue();  //获取数据源信息  
 });  
   
 //获取数据源信息  
 //  
 function GetseriesValue() {  
     $.ajax({  
         type: "post",  
         url: "${ctx}/log/loginData.action",  
         cache: false,  
         success: function (data) {  
             var dataTmp = data;  
             GetData(dataTmp);  
         },  
         error: function () {  
             alert("请求超时，请重试！");  
         }  
     });  
 };  
   
 //绑定获取数据信息操作  
 //  
 function GetData(dataTmp) {   
      $('#container').highcharts({  
             title: {  
                 text: '用户登录时间段统计图表',  
                 x: -20 //center  
             },  
             lang: {  
                 printChart: '打印图表',  
                 downloadPNG: '下载JPEG 图片',  
                 downloadJPEG: '下载JPEG文档',  
                 downloadPDF: '下载PDF 文件',  
                 downloadSVG: '下载SVG 矢量图'  
             },  
             subtitle: {  
                 text: '统计时间：'+new Date().format("yyyy-MM-dd hh:mm:ss"),  
                 x: -20  
             },  
             xAxis: {  
                 categories: ['0点', '1点', '2点', '3点', '4点', '5点','6点', '7点', '8点', '9点', '10点',   
                     '11点', '12点', '13点', '14点', '15点', '16点', '17点', '18点', '19点', '20点', '21点', '22点', '23点']  
             },  
             yAxis: {  
                 title: {  
                     text: '数量(次)'  
                 },  
                 plotLines: [{  
                     value: 0,  
                     width: 1,  
                     color: '#808080'  
                 }]  
             },  
             tooltip: {  
                 valueSuffix: '次'  
             },  
             legend: {  
                 layout: 'vertical',  
                 align: 'right',  
                 verticalAlign: 'middle',  
                 borderWidth: 0  
             },  
             series: eval("[" + dataTmp + "]")  //获取数据源操作信息  
         });  
 }  
    
 </script>  
 </head>  
 <body>  
   
   
 <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
   
 </body>  
 </html>  
 
   
 

四、后台源码

注意：后台主要是封装highcharts所需要的数据格式，返回到前台

[html]view plaincopy 
   
 <span style="font-size:14px;">@RequestMapping("loginData")  
     public void loginData(HttpServletRequest request, HttpServletResponse response) {  
         // String reg2 = "{name: 'Tokyo',data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]}";  
         // {  
         // name: 'Tokyo',  
         // data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]  
         // }  
         List<Object[]> lists = logService.findReportByLoginCount();  
         List<String> reList = getReg24List(lists);  
         String reg = "{name: '登录',data: [";  
         for (String s : reList) {  
             reg += s + ",";  
         }  
   
         reg = reg.substring(0, reg.length() - 1);  
   
         reg += "]}";  
   
         ResultUtil.sendString(response, reg);  
     }</span>  

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
highchart

%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> %@ include file="/WEB-INF/include/taglib.jsp"%> > html> head> meta http-equiv="Content-T
复制链接

扫一扫