2017-05-04 16 views
1

私はハイチャートとライブデータを扱っています。私はこの例を見て、それが私のために正常に動作します:ライブデータのハイチャート:左側のチャートの整列

https://www.highcharts.com/docs/working-with-data/live-data

が、最初のデータが到着したとき、それはチャートの途中でポイントを描画します。 enter image description here

ときにグラフがOKに見えますデータでいっぱいです:enter image description here

しかし、私は描画する点がほとんどなくても、左に線を揃えたいと思います。出来ますか?

答えて

1

ここでの問題はxAxisオブジェクトのmaxZoom属性にあります。それを使用して、xAxisの最小範囲を指定できます。maxZoom20000に設定されています。左にポイントを整列させるには、設定からこの属性を削除するだけです。ここで私の編集したバージョンのこのフィドルです:https://jsfiddle.net/arcquim/y9eaw1rf/13/

ところで、maxZoomは廃止され、新しいminRange属性に置き換えられました。

1

maxZoom(実際にはminRange)プロパティを維持したい場合は、最初のポイントの追加に軸minを設定する必要があります。ポイントのシフトを開始するときに、minをリセットしてチャートが極端に変化するようにします。

 load: function() { 

    // set up the updating of the chart each second 
    var chart = this; 
    var series = this.series[0]; 
    var minSet = false; 
    var extremesReset = false; 

    setInterval(function() { 
     var x = (new Date()).getTime(), // current time 
     y = Math.round(Math.random() * 100); 

     if (!minSet) { 
     chart.xAxis[0].update({ 
      min: x 
     }, false); 
     minSet = true; 
     } 

     if (series.data.length > 20 && !extremesReset) { 
     chart.xAxis[0].update({ 
      min: null, 
     }, false) 
     extremesReset = true; 
     } 

     series.addPoint([x, y], true, series.data.length > 20, series.data.length); 

    }, 1000); 
    } 

例:http://jsfiddle.net/xbrwqk46/

関連する問題