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的重绘参数。无论何时调用更新方法

，都要将此参数设为false

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

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

chart.redraw();

Highcharts实时图表不断变换

2 个答案: