Highcharts+Ajax定时从后端获取数据刷新数据、坐标轴、title等

朴灿烈づ我的快乐病毒、 2022-03-17 13:44 191阅读 0赞

js代码：

var timestamp; //时间戳，动态获取用来生成title
    var cat = []; //横坐标
    var data; //数据
    
    function add0(m){return m<10?'0'+m:m }
    function format(timestamp)
    {
        var time = new Date(parseInt(timestamp));
        var y = time.getFullYear();
        var m = time.getMonth()+1;
        var d = time.getDate();
        var h = time.getHours();
        var mm = time.getMinutes();
        var s = time.getSeconds();
        return y+'年'+add0(m)+'月'+add0(d)+'日 '+add0(h)+':'+add0(mm)+':'+add0(s);
    }
    
    var charts = Highcharts.chart('container', {
        chart: {
            zoomType: 'x'
        },
        boost: {
            useGPUTranslations: true
        },
        title: {
            text: '广播频段实时强度数据',
            style:{
                color:"#1d2c4a"
            }
        },
        tooltip: {
            valueDecimals: 2
        },
        xAxis: {
            categories: cat
        },
        series: [{
            id : 'frequency',
            data: data,
            name: '强度',
            lineWidth: 1.5
        }]
    });
    
    function getRealtimeData() {
        $.ajax({
            type: "post",
            async: true,            
            url: "/realTimeFrequency",   //要访问的Controller 
            data: {},
            dataType: "json",
    
            success: function (result) {
    
                if (result) {
                    var json = eval(result);
                    var start = parseInt(json.start);
                    var end = parseInt(json.end);
                    var spacing = parseInt(json.spacing);
                    cat = [];
                    for (var j = start; j<= end; j = j + spacing) {
                        cat.push(String(j));
                    }
                    var arr = [];
                    var value = json.value.split(",");
                    var time = value.shift();
                    timestamp = time;
                    for (var i = 0; i < value.length; i = i + 1) {
                        arr.push([
                            cat[i],
                            Number(value[i])
                        ])
                    }
                    data = arr;
                }
            }
        });
    }
    
    var frequency =  charts.get('frequency');
    setInterval(function() {
        getRealtimeData();
        charts.xAxis[0].setCategories(cat); //刷新横坐标值
        var title = format(timestamp); //根据时间戳获得title
        charts.setTitle( {text: title}); //刷新title
        // 第2个参数表示是否重绘，第3个参数表示是否启用动画，第4个参数表示是否更新数据点[数组长度一样时建议false]
        frequency.setData(data, true, true, false);
    }, 1000);

后台代码：

import org.json.JSONObject;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    import java.util.Locale;
    import java.util.Random;
    
    @Controller
    @RestController
    public class RealtimeController {
        @RequestMapping("/realTimeFrequency")
        public String realTimeInformation(Locale locale, Model model) {
            String value = "1541061929261,100,100,100,300,100,100,200,100,200,100,100,100,200,100,100,200,200,100,100,200,100,200,500,0,100,200,100,200,200,100,100,100,200,200,300,100,100,100,100,100,300,100,200,100,200,200,100,100,200,100,200,100,200,200,200,200,200,100,200,200,200,100,200,200,300,200,200,200,100,200,200,200,200,200,200,300,400,300,100,200,300,200,200,100,100,100,200,200,500,200,100,100,500,200,100,300,200,200,300,300,300,400,400,300,200,200,100,0,100,200,200,100,100,200,100,200,300,200,200,200,100,100,100,200,100,100,300,200,200,300,300,200,500,2100,4400,5500,6400,6200,5200,3700,1200,200,300,200,300,200,200,200,200,200,100,100,300,100,200,400,700,300,200,100,1600,200,100,100,200,200,200,400,200,300,200,300,1800,4500,5500,5500,5400,5100,5300,4200,2100,400,100,200,200,200,0,200,200,200,200,100,200,200,200,0,200,400,1600,1800,2600,2600,1600,1500,200,100,0,400,700,500,200,200,100,200,200,300,600,600,200,0,200,200,100,200,0,200,100,100,100,200,100,200,300,100,0,200,500,2600,4400,4300,5600,4700,3300,3800,2100,300,300,300,400,200,200,100,200,100,200,100,100,200,400,500,600,600,700,200,400,500,300,300,100,200,100,300,200,300,300,400,800,2700,4700,5900,6400,6300,4600,1000,300,300,400,300,300,300,200,200,200,200,400,600,400,400,300,200,100,300,300,700,900,700,300,200,100,200,600,200,1500,3600,5300,5300,5500,5000,3500,1600,400,100,200,1000,900,400,200,100,100,0,100,100,200,200,200,200,400,100,100,100,200,100,100,200,200,400,0,100,200,300,200,200,200,300,100,100,100,300,600,200,1100,200,100,200,0,100,100,100,300,200,100,200,300,500,700,600,600,500,500,500,3400,3600,3500,900,1700,5200,4200,5100,5600,5200,3300,800,100,800,3800,3600,3500,700,600,1200,800,600,600,600,300,200,200,200,200,100,100,300,200,300,300,100,100,200,300,500,300,400,1300,2000,1900,1800,1500,1000,200,100,200,400,300,300,100,200,400,2500,2400,2700,2900,2600,1900,900,200,200,200,200,200,300,300,1700,2400,3900,5200,5500,5700,5500,4600,3400,2300,600,300,300,200,200,100,400,800,800,500,400,300,200,300,300,600,300,200,300,500,200,200,200,300,200,200,300,200,200,100,300,200,300,100,200,800,400,1600,2200,3500,4500,4900,4700,5000,5200,4600,4400,3100,1900,800,600,600,300,1000,1000,1500,1600,300,200,500,200,200,200,200,100,200,300,300,100,200,200,0,1700,3600,4600,5700,5100,4300,2700,800,200,300,500,900,600,100,200,600,1700,2100,2400,2800,2100,2300,1500,300,300,100,200,1300,3600,5000,5300,5600,5100,4300,2200,400,300,300,400,400,300,400,300,300,300,300,300,600,200,300,300,300,300,400,1100,1000,3300,4800,5800,6200,5700,5300,2400,1600,400,400,300,400,300,400,300,400,300,2400,5000,5600,5000,3700,1500,300,300,300,300,400,300,400,500,1300,1600,2000,2200,2100,1900,1500,1900,1200,700,400,300,300,300,400,300,300,300,400,500,500,400,400,300,300,300,200,300,300,300,300,300,300,400,300,400,200,400,500,800,1500,900,700,300,300,300,300,300,300,200,400,1000,3300,4700,5000,5600,5400,5100,5200,5200,3700,1600,300,300,300,300,300,300,400,1700,1600,2300,2300,2600,2100,1300,400,300,300,400,400,400,300,300,400,400,400,400,400,500,500,500,500,400,400,700,1300,600,300,300,400,500,1300,3100,4000,4600,5700,6100,5800,5900,5200,4200,3100,1800,800,800,800,600,600,500,900,600,700,1200,2500,4300,5300,6100,6100,5900,5400,4700,3800,2900,1300,600,600,500,600,600,800,800,1100,2800,4500,6000,6300,7000,7000,6700,6400,5700,4100,2300,1000,700,700,700,500,400,500,500,400,500,500,500,500,500,900,600,400,500,400,400,500,500,500,500,600,600,1400,3100,5400,6600,6700,6700,5000,3700,1300,700,800,1000,1000,1200,2500,4100,5200,4800,3100,1400,900,400,500,500,600,500,400,300,300,200,200,300,200,300,300,300,400,400,1300,1900,1700,1500,500,400,500,400,300,300,300,300,200,1200,1800,1200,300,300,300,300,400,300,400,400,300,300,300,200,300,500,700,600,300,300,300,300,300,400,900,400,300,300,400,200,300,300,300,300,300,300,400,300,300,200,400,300,300,400,300,300,300,400,500,300,300,300,300,300,300,300,300,300,400,400,300,400,300,300,400,400,300,300,200";
            String value2 = "1541061929261,2000,2000,1000,3000,2000,2000,2000,1000,2000,1000,1000,1000,2000,1000,1000,2000,2000,1000,100,200,100,200,500,0,100,200,100,200,2000,1000,1000,1000,2000,2000,3000,1000,1000,1000,1000,1000,3000,1000,200,100,200,200,100,100,200,100,200,100,200,200,200,200,200,100,200,200,200,100,200,200,300,200,200,200,100,200,200,200,200,200,200,300,400,300,100,200,300,200,200,100,100,100,200,200,500,200,100,100,500,200,100,300,200,200,300,300,300,400,400,300,200,200,100,0,100,200,200,100,100,200,100,200,300,200,200,200,100,100,100,200,100,100,300,200,200,300,300,200,500,2100,4400,5500,6400,6200,5200,3700,1200,200,300,200,300,200,200,200,200,200,100,100,300,100,200,400,700,300,200,100,1600,200,100,100,200,200,200,400,200,300,200,300,1800,4500,5500,5500,5400,5100,5300,4200,2100,400,100,200,200,200,0,200,200,200,200,100,200,200,200,0,200,400,1600,1800,2600,2600,1600,1500,200,100,0,400,700,500,200,200,100,200,200,300,600,600,200,0,200,200,100,200,0,200,100,100,100,200,100,200,300,100,0,200,500,2600,4400,4300,5600,4700,3300,3800,2100,300,300,300,400,200,200,100,200,100,200,100,100,200,400,500,600,600,700,200,400,500,300,300,100,200,100,300,200,300,300,400,800,2700,4700,5900,6400,6300,4600,1000,300,300,400,300,300,300,200,200,200,200,400,600,400,400,300,200,100,300,300,700,900,700,300,200,100,200,600,200,1500,3600,5300,5300,5500,5000,3500,1600,400,100,200,1000,900,400,200,100,100,0,100,100,200,200,200,200,400,100,100,100,200,100,100,200,200,400,0,100,200,300,200,200,200,300,100,100,100,300,600,200,1100,200,100,200,0,100,100,100,300,200,100,200,300,500,700,600,600,500,500,500,3400,3600,3500,900,1700,5200,4200,5100,5600,5200,3300,800,100,800,3800,3600,3500,700,600,1200,800,600,600,600,300,200,200,200,200,100,100,300,200,300,300,100,100,200,300,500,300,400,1300,2000,1900,1800,1500,1000,200,100,200,400,300,300,100,200,400,2500,2400,2700,2900,2600,1900,900,200,200,200,200,200,300,300,1700,2400,3900,5200,5500,5700,5500,4600,3400,2300,600,300,300,200,200,100,400,800,800,500,400,300,200,300,300,600,300,200,300,500,200,200,200,300,200,200,300,200,200,100,300,200,300,100,200,800,400,1600,2200,3500,4500,4900,4700,5000,5200,4600,4400,3100,1900,800,600,600,300,1000,1000,1500,1600,300,200,500,200,200,200,200,100,200,300,300,100,200,200,0,1700,3600,4600,5700,5100,4300,2700,800,200,300,500,900,600,100,200,600,1700,2100,2400,2800,2100,2300,1500,300,300,100,200,1300,3600,5000,5300,5600,5100,4300,2200,400,300,300,400,400,300,400,300,300,300,300,300,600,200,300,300,300,300,400,1100,1000,3300,4800,5800,6200,5700,5300,2400,1600,400,400,300,400,300,400,300,400,300,2400,5000,5600,5000,3700,1500,300,300,300,300,400,300,400,500,1300,1600,2000,2200,2100,1900,1500,1900,1200,700,400,300,300,300,400,300,300,300,400,500,500,400,400,300,300,300,200,300,300,300,300,300,300,400,300,400,200,400,500,800,1500,900,700,300,300,300,300,300,300,200,400,1000,3300,4700,5000,5600,5400,5100,5200,5200,3700,1600,300,300,300,300,300,300,400,1700,1600,2300,2300,2600,2100,1300,400,300,300,400,400,400,300,300,400,400,400,400,400,500,500,500,500,400,400,700,1300,600,300,300,400,500,1300,3100,4000,4600,5700,6100,5800,5900,5200,4200,3100,1800,800,800,800,600,600,500,900,600,700,1200,2500,4300,5300,6100,6100,5900,5400,4700,3800,2900,1300,600,600,500,600,600,800,800,1100,2800,4500,6000,6300,7000,7000,6700,6400,5700,4100,2300,1000,700,700,700,500,400,500,500,400,500,500,500,500,500,900,600,400,500,400,400,500,500,500,500,600,600,1400,3100,5400,6600,6700,6700,5000,3700,1300,700,800,1000,1000,1200,2500,4100,5200,4800,3100,1400,900,400,500,500,600,500,400,300,300,200,200,300,200,300,300,300,400,400,1300,1900,1700,1500,500,400,500,400,300,300,300,300,200,1200,1800,1200,300,300,300,300,400,300,400,400,300,300,300,200,300,500,700,600,300,300,300,300,300,400,900,400,300,300,400,200,300,300,300,300,300,300,400,300,300,200,400,300,300,400,300,300,300,400,500,300,300,300,300,300,300,300,300,300,400,400,300,400,300,300,400,400,300,300,200";
            int a = new Random().nextInt(2);
            JSONObject jsonObj = new JSONObject();
            jsonObj.put("start", 86000);
            jsonObj.put("end", 109000);
            jsonObj.put("spacing", 25);
            if(a == 0)
                jsonObj.put("value", value);
            else jsonObj.put("value", value2);
            return jsonObj.toString();
        }
    }

访问Controller返回数据如下：

![20190224200450971.png][]

经测试成功实时刷新数据，如图所示：

![20190224201000985.gif][]

[20190224200450971.png]: /images/20220317/12a38cf3711d40e6a77ed9206c713945.png
[20190224201000985.gif]: /images/20220317/b75b8086d22a4db9b405cf6d8ee2ef3f.png