すべてのハイチャートチャートシリーズを同期して更新する

以下のコードを使用して、3つの信号でハイチャートを表示し、アニメーションで定期的に更新します。しかし、問題は、2つの信号について、ドットが最初に更新され、次に曲線がドットに滑り込むことである。信号が1つしかない場合は、ドットが曲線から飛び越えることはありません。ドットをグラフから「飛ばし」なくして、すべての曲線を更新するにはどうすればよいですか？ APIを見るとすべてのハイチャートチャートシリーズを同期して更新する

<!DOCTYPE html> 
 
    <html lang="en"> 
 
    <head> 
 
    </head> 
 
     
 
    <body> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
    
 
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
 
    
 
      
 
    <script type="text/javascript"> 
 
    
 
    $(document).ready(function() { 
 
     function initData() 
 
     { 
 
     var data = []; 
 
     var time = Date.now(); 
 
     for (var i = -60; i <= 0; i += 1) { 
 
      data.push({ x: time + i * 1000, y: 0 }); 
 
     } 
 
     return data; 
 
     } 
 
    
 
     Highcharts.chart('container', { 
 
     chart: { 
 
     type: 'spline', 
 
     animation: { duration:500}, //false, 
 
     events: { 
 
      load: function() { 
 
      var series = this.series; 
 
      var len = series.length; 
 
      setInterval(function() { 
 
       var t = Date.now(); 
 
       for (var j = 0; j < len; j++) { 
 
       series[j].addPoint([t, Math.random()], true, true); 
 
       } 
 
      }, 1000); 
 
      } 
 
     } 
 
     }, 
 
     title: {text: 'Live random data'}, 
 
     xAxis: {type: 'datetime', tickPixelInterval: 150 }, 
 
     yAxis: {title: {text: 'Value' }, plotLines: [{value: 0, width: 1, color: '#808080'}] }, 
 
     legend: { enabled: false }, 
 
     exporting: { enabled: false }, 
 
      series: 
 
      [ 
 
       { name: 'Random data', data: initData() }, 
 
       { name: 'Signal2', data: initData() }, 
 
       { name: 'Signal3', data: initData() } 
 
      ] 
 
     }); 
 
    }); 
 
    </script> 
 
     
 
    <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: 500px; margin: 0 auto"></div> 
 
    
 
    </body> 
 
    </html>

出典

2017-10-16 Joakim Carlsson

、それはポイントを追加で次の言葉：

はポイントが追加された後、チャートを再描画するかどうかをブール

を再描画します。複数のポイントを追加する場合は、再描画オプションをfalseに設定し、ポイントの追加が完了した後にHighcharts.Chart＃redrawを明示的に呼び出すことを強くお勧めします。それ以外の場合は、各点を追加した後にグラフが再描画されます。

すべてのポイントを追加した後にredrawが変更されるように変更すると、問題が解決されたようです。

load: function() { 
    var series = this.series; 
    var len = series.length; 
    setInterval(function() { 
    var t = Date.now(); 
    for (var j = 0; j < len; j++) { 
     series[j].addPoint([t, Math.random()], false, true); //set redraw to false 
    } 
    chart.redraw(); //added a redraw here 
    }, 1000); 
}

の作業例：https://jsfiddle.net/ewolden/q489nsgw/4/

addPointのAPI：http://api.highcharts.com/class-reference/Highcharts.Series#addPoint

出典

2017-10-17 06:43:36 ewolden

はい、ありがとうございます:)これは、所望の動作です –

すべてのハイチャートチャートシリーズを同期して更新する

答えて

関連する問題