私はハイチャートとライブデータを扱っています。私はこの例を見て、それが私のために正常に動作します:ライブデータのハイチャート:左側のチャートの整列
https://www.highcharts.com/docs/working-with-data/live-data
が、最初のデータが到着したとき、それはチャートの途中でポイントを描画します。
しかし、私は描画する点がほとんどなくても、左に線を揃えたいと思います。出来ますか?
私はハイチャートとライブデータを扱っています。私はこの例を見て、それが私のために正常に動作します:ライブデータのハイチャート:左側のチャートの整列
https://www.highcharts.com/docs/working-with-data/live-data
が、最初のデータが到着したとき、それはチャートの途中でポイントを描画します。
しかし、私は描画する点がほとんどなくても、左に線を揃えたいと思います。出来ますか?
ここでの問題はxAxis
オブジェクトのmaxZoom
属性にあります。それを使用して、xAxis
の最小範囲を指定できます。maxZoom
は20000
に設定されています。左にポイントを整列させるには、設定からこの属性を削除するだけです。ここで私の編集したバージョンのこのフィドルです:https://jsfiddle.net/arcquim/y9eaw1rf/13/。
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);
}