もうどうしたらいいのかわからない。Webアプリケーションで高在庫チャートを作成しています。データは正しくロードされますが、チャートオプションでzoomType：'x'を有効にするとすぐに、ズーム時にエラーが発生し始めます。
エラーを正しく再現できません。しかし、xAxisに沿ってズームして、チャートに表示されているほぼすべてのポイントを選択しようとすると、実行され、うまくズームされます。しかし、ポイントの小さなグループを選択すると、Chromeがシャットダウンするまでブラウザが停止します。タスクマネージャーで、最大1GBのRAM使用量のメモリが構築されているのがわかります。他のブラウザでテストしたところ、同じエラーが発生しました。xAxisでイベントを処理しません-ズームインとズームアウトするだけです。highstockData.jspは、多くのタイムスタンプを持つ単なるファイルです。
tldr：多くのポイントを選択すると、うまくいきます。いくつかのポイントを選択すると、ブラウザがクラッシュし、メモリがリークし始めます
更新： rangeSelectorを有効にして1mをクリックすると、メモリも蓄積され始めます。しかし、さらに数分（最大5分）待つと、ロードされ、メモリが再びダウンし始めます。
Update2：もう少し デバッグしてみました。5分近く待った後、Chrome内のCPU使用率プロファイルのスクリーンショットを作成しました。http://i.imgur.com/xmqhI.png CPU使用率の80％近くがgetnonlineartimeticksによって使用されていると書かれています。
解決策：他の人の情報のためだけに。解決しました。問題は
xAxis : {
tickInterval : 4
},
xAxisを小さなtickIntervalに強制すると、すべての問題が発生しました...
ここにいくつかのコードがあります：
function initHighstock() {
options = {
chart : {
zoomType : 'x',
renderTo : 'highstockContainer'
},
plotOptions : {
series : {
lineWidth : 0,
marker : {
enabled : true,
radius : 3
},
}
},
navigator : {
enabled : false
},
yAxis : {
min : 0,
max : 24,
tickInterval : 4
},
xAxis : {
tickInterval : 4
},
tooltip : {
shared : false,
formatter : function() {
return '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b>' + '<br/>' + 'Time of day: '
+ this.y;
}
},
rangeSelector : {
enabled : true
},
title : {
text : 'Diary'
},
series : []
};
$.get('highstockData.jsp', function(data) {
// Split the lines
var lines = data.split(';');
var series = {
data : []
};
for ( var k = 0; k < lines.length; k++) {
if (lines[k].length > 0) {
var line = lines[k];
var items = line.split(',');
var myDate = new Date(Math.round(items[0] * 1000));
series.data.push([ parseInt(Math.round(myDate.getTime())), parseInt(Math.round(myDate.getHours())) ]);
myDate = null;
}
}
series.data.sort(function(x, y) {
return x[0] - y[0];
});
options.series.push(series);
// Create the chart
var chart1 = new Highcharts.StockChart(options);
chart1.redraw();
});
};