highcharts - Highcharts 实时图表不断变化

Question

我有以下问题：

我用空值初始化图表，因为我没有有意义的初始值。我通过ajax获取数据后用addPoint加点问题是图表不断变化，而不仅仅是在时间范围的末尾。

我使用代码：

generateInitialData = function() {
        var initialData = [];
        var time = (new Date()).getTime();
        var i;
        for (i = -99; i <= 0; i++) {
            initialData.push([time + i * 3000,null]);
        }
        return initialData;
    }

addPoint = function(){
    var max = 1000;
    var min = 300;
    var value =  Math.floor(Math.random() * (max - min + 1)) + min;
    chart.series[0].addPoint([(new Date()).getTime(), value], true, true);
}

$('#container').highcharts({
         chart: {
                 type: 'line',
            },
            xAxis: {
                type: 'datetime',
                minRange:1000 * 60 * 5,
                maxRange:1000 * 60 * 5
            }
});

var chart = $('#container').highcharts();

chart.addSeries({"name": "example","data":generateInitialData()});

setInterval(addPoint,3000);

请参阅问题的 jsFiddle 演示：

http://jsfiddle.net/wXmLQ/7/

请帮忙

大理

Answer 1

您不需要从一开始就设置空数据，而是只需添加一个空点并检查是否要移动，请参阅：http: //jsfiddle.net/Fusher/wXmLQ/8/

addPoint = function(){
  var max = 1000;
  var min = 300;
  var value =  Math.floor(Math.random() * (max - min + 1)) + min;
  var len = chart.series[0].data.length;
  chart.series[0].addPoint([(new Date()).getTime(), value], len < 99);
}

$('#container').highcharts({
     chart: {
             type: 'line',
        },
        xAxis: {
            type: 'datetime',
            minTickInterval: 1000 * 60, //one minute
            minRange:1000 * 60 * 5,
            maxRange:1000 * 60 * 5
        }
});

var chart = $('#container').highcharts();

chart.addSeries({"name": "example","data":[[+new Date(), null]]});

setInterval(addPoint,3000);

Answer 2

addPoint 和 addSeries 方法有一个默认为 true 的 re-draw 参数。每当您调用更新方法时，将此参数设为 false

chart.series[0].addPoint([(new Date()).getTime(), value], false);
chart.addSeries({"name": "example","data":generateInitialData()}, false);

然后在完成所有更新后，明确地重新绘制图表

chart.redraw();