同步更新所有Highcharts圖表系列

我使用下面的代碼來顯示帶有3個信號的Highchart，這些信號會通過動畫定期更新。但問題是，對於2個信號，點首先被更新，然後曲線滑入點。當我只有一個信號看起來更好時，這些點永遠不會跳出曲線。如何更新所有曲線而沒有將點「跳出」圖表？同步更新所有Highcharts圖表系列

<!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

望着API，它說，在加點如下：

重繪布爾

是否重新繪製圖表復加的地步了。添加多個點時，強烈建議將重繪選項設置爲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/

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

來源

2017-10-17 06:43:36 ewolden

是的，謝謝:)這是所期望的行爲 –

同步更新所有Highcharts圖表系列

回答

相關問題