• Highcharts网页版


    //后台控制器中(SpringMVC)
    @RequestMapping(value="/getAll",method=RequestMethod.POST)
            @ResponseBody
            public List<UserOnlineNum> getAll(HttpServletRequest request,HttpServletResponse response ) throws Exception{
                    UserOnlineNum onlineNum = new UserOnlineNum();
                    List<UserOnlineNum> list = onlineNumService.findLists(onlineNum);
                    JsonWriteUtil.writeJson(response, list);
                    return list;
            }
    
    
    //js
    $(document).ready(function() {  
        Highcharts.setOptions({  
            global: {  
                useUTC: false  
            }  
        });  
        var chart;  
        chart = new Highcharts.Chart({  
            chart: {  
                renderTo: 'container',  
                        type: 'spline',   //图表类型 line, spline, area, areaspline, column, bar, pie , column,scatter 
                marginRight: 10,   
                events: {  
                    load: function () {   
                        var series = this.series[0];  
                        var loaddata = function () {  
                            $.ajax({  
                                async: false,  
                                type: "POST",  
                                dataType: "json",  
                                contentType: "application/json;charset=utf-8",  
                                url: "./getAll", //读取数据  
                                success: function (result) {  
                                        // 时间
                                        var dates = new Array();
                                        // 人数
                                        var nums = new Array();
                                        
                                        for(var i = 0;i< list.length;i++){
                                                // 把时间添加到集合中
                                                dates.push(list.datetime);
                                                // 把人数添加到集合中
                                                nums.push(list.num);
                                        }
                                        // 把日期和人数集合转换成JSON
                                        var dateJson = eval("("+dates+")");
                                        alert(dateJson)
                                        var numJson = eval("("+nums+")"); 
                                        alert(numJson)
                                }  
                            });  
                            series.addPoint([dates, nums], true, true);  
                        };  
                       // setInterval(loaddata, 300000);//每5分钟执行一次  
                    }  
                }  
             },
            xAxis: {
                    categories: dateJson,//xAxisstr为时间hh:mm 
                    tickPixelInterval: 100
            },
            yAxis: {    
                min: 0,
                title: {text: '数量(天/充值数)'}          //Y轴坐标标题  labels:纵柱标尺
            },  
            legend: {                               //【图例】位置样式
                layout: 'horizontal',               //【图例】显示的样式:水平(horizontal)/垂直(vertical)
                backgroundColor: '#FFFFFF',
                borderColor: '#CCC',
                borderWidth: 1,
                align: 'center',
                verticalAlign: 'top',
                enabled:true,
                y: 50,
                shadow: true
            },
            tooltip: {  
                    //当鼠标悬置数据点时的格式化提示  
                    formatter: function() {
                    return '实际在线人数:' + Highcharts.numberFormat(this.y, 1) +'人' +'<br/>当前时间点:'+
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x,2) +'<br/>';
                    }
            },  
            credits: {
                enabled: false
            }, 
            title: { text: '用户在线人数' }, //图表主标题  
            subtitle: {text: '(2014年9月13日)' }, //图表副标题  
                    series : [ {
                            name : '盛迅达',
                            data :  numJson        
                    }]
        });
    });
  • 相关阅读:
    vim使用技巧
    排序
    2020-3-27 学习面向对象的笔记
    小圆圈第三章答案
    内置函数部分用法
    Pycharm快捷键
    小猿圈第二章答案
    Typora学习笔记
    AI的真实感
    Unity 横版2D移动跳跃问题——关于一段跳与二段跳
  • 原文地址:https://www.cnblogs.com/onetwo/p/5620802.html
Copyright © 2020-2023  润新知