Comment utiliser Highcharts pour implémenter ce changement dynamique de droite à gauche?

Question

J'utilise Highcharts pour dessiner un graphique avec des données dynamiques.

J'ai trouvé cette démo officielle. http://jsfiddle.net/vn9bk80j/

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

    $('#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); 
        }, 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: [] 
     }] 
    }); 
    }); 
}); 
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

Le graphique taille de la fenêtre est varing, il ressemble à

Howerver, j'ai besoin graphique taille de la fenêtre à fixer, les données de cette évolution graphique de droite à gauche dans son ensemble depuis le début. Juste comme dans la photo suivante.

Comment puis-je obtenir les effets dans l'image 2 avec Highcharts?

Answer 1

Vous pouvez utiliser des points nuls pour créer un espace vide, puis il suffit d'ajouter pintes avec shift=true, voir: http://jsfiddle.net/vn9bk80j/1/

function getEmptyData() { 
    var interval = 1000, // 1 second, 
    numberOfPoints = 50, 
    now = (new Date()).getTime(), 
    min = now - interval * numberOfPoints, 
    points = []; 

    while (min <= now) { 
    points.push([min, null]); // set null points 
    min += interval; 
    } 
    return points; 
} 

Et méthode cas d'utilisation:

series: [{ 
    name: 'Random data', 
    data: getEmptyData() 
    }] 

shift=true exemple:

series.addPoint([x, y], true, true);