Highcharts 实时图表 setExtremes 问题

Question

我有一个带有实时数据更新的高图，我使用 setInterval 添加虚假数据，当从 ajax 调用接收到数据时，我添加或更新数据点，具体取决于图形上是否存在时间戳，正如您在示例中看到的那样，即使列超出图形区域，数据长度也会不断增加，

$(function () {
var minTime =  (new Date()).getTime();
var time_range = 20000;
var maxTime = minTime - time_range;


$(document).ready(function () {

    $('#add').on('click', function(){

        updateDataPoints();

    });

    /**
    * Function to update data points, in real using using socket 
    */
    var updateDataPoints = function(){
        var data = chart.series[0].data;
        var updateCount=0;
    for(var i=0; i<data.length;i++){
        var row =  data[i];
        row.update(row.y+Math.random(1,5));
        updateCount++;
    }


        $('#updateCount').text(updateCount);
    }

    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });

    var chart = new Highcharts.Chart({
        chart: {
            renderTo:'container',
            type: 'column',
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            events: {
                load: function () {

                    // set up the updating of the chart each second
                    var series = this.series[0];
                    setInterval(function () {
                        var x = (new Date()).getTime(), // current time
                            y = 1;
                        series.addPoint([x, y], true, false);

                        var time =  ( (new Date()).getTime() );
                chart.xAxis[0].setExtremes( time - time_range, time);

                        $('#count').text(series.data.length);
                    }, 1000);
                }
            }
        },
        title: {
            text: 'Live random data'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,
            max: minTime,
            min: maxTime

        },
        yAxis: {
            min:0,
            max:20,
            title: {
                text: 'Value'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        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, 2);
            }
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        series: [{
            name: 'Random data',
            data: []
        }]
    });
});

});

如何将数据点的数量限制为仅在图表上可见（使用 setExtremes）

Answer 1

您可以使用序列更新然后切片数据来保持序列的相同长度。

load: function () {

                var series = this.series[0],
                    yData = series.yData,
                    y;

                setInterval(function () {
                    y = Math.random();
                    yData = series.yData;

                    yData.push(y);
                    series.yData = yData;
                    series.update({
                        data: yData.slice(1)
                    });

                }, 1000);
            }

示例：http://jsfiddle.net/owk1Lere/2/

Highcharts 实时图表 setExtremes 问题

Highcharts live graph setExtremes issue

highcharts