Highcharts жить диаграммы изменения непрерывно

Question

У меня есть следующий вопрос:

Я инициализировать таблицу с нулевыми значениями, потому что не имеют содержательные начальные значения. Я добавляю точки с addPoint после получения данных через ajax Проблема в том, что диаграмма перемещается непрерывно, а не только в конце временного диапазона.

Я использую код:

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

Методы addPoint и addSeries имеют параметр повторного рисования, который по умолчанию правда. Сделайте этот параметр ложь всякий раз, когда вы вызываете метод ОБНОВЛЕНИЕ

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

Тогда, как только вы сделали все обновления, явно перерисовывать график

chart.redraw(); 

Answer 2

Вам не нужно устанавливать нулевые данные с самого начала , вместо того, что вы можете просто addd одну пустую точку и просто проверить, если вы хотите переместить или нет, см: 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);