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

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返回数据如下：

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