基于highcharts的图表实时更新

做项目碰到了这个问题，看了挺多东西，下面是cpu实时更新的代码：

<div class="row">

<div class="col-md-6">
<!-- BOX -->
<div id="container33" style="width: auto; height: auto; margin: 0 auto"></div>
<script language="JavaScript">
var chart_cpu;
$(document).ready(function() {
     var chart_cpu = {
        renderTo:'container33',
        type: 'spline',
        animation: Highcharts.svg, // don't animate in IE < IE 10.
        marginRight: 10,
        events: {
        load:function () {
        var series = this.series[0];
        setInterval(function(){
$.ajax({
type:'POST',
beforeSend: function(xhr, settings){
var csrftoken = $.cookie('csrftoken');
xhr.setRequestHeader("X-CSRFToken", csrftoken);
},
url:'/replays/',
dataType:'json',
contentType:'application/json',
async:"false",//同步
success:function(data){
var x = (new Date()).getTime(), // current time
                        y = data[0];
                    series.addPoint([x, y], true, true);
}
});
}, 1000);
                // set up the updating of the chart each second


            }
        }
    };
    var title = {
        text: 'CPU使用率走势图',
        style:{
      fontSize: '20px',
      }
    };
    var xAxis = {
        type: 'datetime',
        tickPixelInterval: 150,
        text:'时间'
    };
    var yAxis = {
        title: {
            text: '使用率(%)'
        },
        min:0,
        plotLines: [{
            value: 0,
            width: 3,
            color: '#808080'
        }]
    };
    var tooltip = {
        formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' +
                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                Highcharts.numberFormat(this.y, 0)+'%';
        }
    };
    var plotOptions = {
        area: {
            pointStart: 2017,
            marker: {
                enabled: false,
                symbol: 'circle',
                radius: 2,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            }
        }
    };
    var legend = {
        enabled: false
    };
    var exporting = {
        enabled: false
    };


    var series= [{
        name: 'CPU使用率',
        data: (function () {
            // generate an array of random data
            var data = [],time = (new Date()).getTime(),i;
            for (i = -19; i <= 0; i += 1) {
                data.push({
                    x: time + i * 1000,
                    y: Math.random()*100
                });
            }
            return data;
        }())
    }];
     var credits={
        enabled:false
    };


    var json = {};
    json.chart = chart_cpu;
    json.title = title;
    json.tooltip = tooltip;
    json.xAxis = xAxis;
    json.yAxis = yAxis;
    json.legend = legend;
    json.exporting = exporting;
    json.series = series;
    json.credits=credits;
    json.plotOptions = plotOptions;
    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });
    $('#container33').highcharts(json);


});

</script>

这个只是写的js，其中replays要对应到你所可以传递数据的地址，我用的是django，所以是在view.py里写相应的地址就可以，还要注意要在url里设置一下。