HighStocksを使用して売買する2つのデータセットで長期的に実行できるビットコインのライブグラフを作成しようとしています.問題はデータがすべてライブであるため、グラフはデータなしで始まり、30秒ごとに更新され、それらの条件でHighStocks はいつも上手くいくとは限らない
最終的なコードhttp://jsfiddle.net/v3z6T/2/に非常に近いデモを作成しました! 増分はデモを高速化するために 1 秒に設定されます。また、adaptToUpdatedData を true に変更すると、ナビゲーターの最小間隔 (30 秒) を超えるまで大幅な遅延効果が生じるため、注意してください。
ナビゲーター領域を機能させたいのですが、adaptToUpdatedData : true で更新したままにしておくと、しばらくするとグラフが非常に遅くなり、ブラウザー全体が応答しなくなり、スクリプト遅延エラーが発生することなく、何時間も実行したままにすることはできません。
たとえば、30 秒単位で 8 時間実行しても 960 データ ポイントしかなく、見た目ほど多くの処理とメモリを使用するには不十分なので、これは私にとって奇妙です。
adaptToUpdatedData が false の場合、グラフははるかに高速で、ナビゲーション ボタンの 1 つが使用されるまで更新ストリームは問題ありません。新しい更新が範囲外であるため、グラフは「ライブ」ではなくなります。また、ナビゲーターは、系列データの開始
ナビゲーターの更新をトリガーする方法や、ナビゲーター領域を更新し続け、グラフを最新のデータエントリポイントに保ち、タイムリーにページのレンダリングを停止しない新しいデータポイントを追加するときに呼び出すことができる方法を知っている人はいますか? ? またはAPIまたはデータを使用するより良い方法
このグラフの全体的な考え方は、進行中のデータのライブビューを取得するために数日、場合によっては数週間実行し続けることです。データはすべてライブであるため、HighStocks の大きなデータセットのサンプルコードを処理することはできません。とにかく、私は大規模なデータセットを実際に扱っているわけではありませんが、常に更新が遅いだけです
$(function()
{
var curTime = $.now();
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'chartContainer',
zoomType: 'x',
turboThreshold:100,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
shadow: false
},
rangeSelector: {
buttons: [{
count: 30,
type: 'second',
text: '30S'
},{
count: 5,
type: 'minute',
text: '5M'
},{
count: 30,
type: 'minute',
text: '30M'
},{
count: 60,
type: 'minute',
text: '1H'
},{
count: 360,
type: 'minute',
text: '6H'
},{
count: 720,
type: 'minute',
text: '12H'
},{
count: 1,
type: 'day',
text: '1D'
},{
type: 'all',
text: 'All'
}],
inputEnabled: false
},
scrollbar: {
liveRedraw: false
},
title : {
text : 'Live Bitcoin Data'
},
exporting: {
enabled: true
},
navigation: {
buttonOptions: {
theme: {
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#bada55'
},
select: {
stroke: '#039',
fill: '#bada55'
}
}
}
}
},
navigator : {
adaptToUpdatedData: false
},
yAxis: {
title: {
text: 'Price'
}
},
xAxis: {
type: 'datetime'
},
credits: {
enabled: false
},
series: [{
name: 'Sell',
color: '#00FF00',
pointStart: $.now(),
data : [],
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 3,
valuePrefix:"$"
}
},{
name: 'Buy',
color: '#FF00FF',
pointStart: $.now(),
data : [],
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 3,
valuePrefix:"$"
}
}]
});
setInterval(function() {
var chart = $('#chartContainer').highcharts();
var exchangeSellRate = Math.floor(Math.random()*30)+40;
var exchangeBuyRate = Math.floor(Math.random()*30)+40;
var x = $.now();
chart.series[0].addPoint([x,exchangeSellRate],false,false);
chart.series[1].addPoint([x,exchangeBuyRate],true,false);
}, 1000);
});