Highcharts - удалить очки из серии

Question

Можно ли удалить определенные очки из серии? Я ищу способ рисовать график с фиксированным периодом времени, что-то вроде: последние 1 час.

Я знаю, как добавить точки с помощью динамического обновления:

http://www.highcharts.com/demo/dynamic-update

Но в моем случае интервал времени между точками не является постоянной величиной, , так что я не могу просто использовать параметр сдвига addPoint.

Спасибо, Омер

Answer 1

Если вы хотите иметь то же самое, вы можете использовать ту же логику, что и в addPoint см: http://jsfiddle.net/JKCLx/1/

Однако, почему вы не можете просто использовать shift аргумент в addPoint() ?

Answer 2

Я думаю, что нашел частичный ответ на мой собственный вопрос:

Я итерация над точками данных серии, как это:

http://api.highcharts.com/highcharts#Series.data

и затем вызвать point.Remove.

Проблема с этим решением заключается в том, что он не рисует стиль монитора, как в примере, , а скорее всего красный график всей диаграммы при каждом изменении.

http://jsfiddle.net/JKCLx/

$(function() { 
    $(document).ready(function() { 
     Highcharts.setOptions({ 
      global: { 
       useUTC: false 
      } 
     }); 

     var chart; 
     $('#container').highcharts({ 
      chart: { 
       type: 'spline', 
       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 = Math.random(); 
          series.addPoint([x, y], true, false);       
          // series.data[0].remove(false); 
          series.data[0].remove(true); 
         }, 1000); 
        } 
       } 
      }, 
      title: { 
       text: 'Live random data' 
      }, 
      xAxis: { 
       type: 'datetime', 
       tickPixelInterval: 150 
      }, 
      yAxis: { 
       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: (function() { 
        // generate an array of random data 
        var data = [], 
         time = (new Date()).getTime(), 
         i; 

        for (i = -19; i <= 0; i++) { 
         data.push({ 
          x: time + i * 1000, 
          y: Math.random() 
         }); 
        } 
        return data; 
       })() 
      }] 
     }); 
    }); 

});