別のビューに移動した後にチャートを再描画してから同じチャート ビューに戻るという問題を解決するのに苦労しています。
アプリケーションの MVC およびテンプレート ソリューションとして Backbone.js と Underscore を使用しています。最初にグラフ作成ページに移動するとうまくいきますが、別の場所に移動してから戻ってくると、「TypeError: chart.series[0] is undefined in the console log.
以下のコードで、エラーが発生した行の末尾近くを強調表示しました。
私の考えでは、ある時点でチャートを destroy() する必要があるかもしれませんが、どこでこれを行うのか、それが私の問題を解決するのかどうかはわかりません。
最近、この問題がないように見えた以前の HighCharts バージョン 2.3.5 から HighStock 'Highstock JS v1.3.6 (2013-10-04)' を使用するようにスクリプトを変更しました。
誰かが実際にそれを必要としている、または実際に見たいと思っているなら、アプリはオンラインで公開されています。私に知らせてください.
次のコード セクションは、バックボーン ルータによって呼び出される関数です。コードの他のセクションが必要な場合は、お知らせください。
アドバイスをいただければ幸いです。
編集:
誰でも問題を表示できるように、JSFiddleでこれを取得できました。
ここであなたの怒りの尾のないものをクリックしてくださいhttp://jsfiddle.net/rockwallaby/pqKWj
最初に実行すると、トレンドが表示されます。
次に、「別のページに移動」リンクをクリックすると、かなり空白のページが表示されます。
そのページには、トレンド ページに戻るためのリンクがあります。
そのリンクをクリックすると元に戻りますが、上記のエラーが原因でトレンドが正しくレンダリングされません。
//=================================================================================
// trendsBattery
// A simple trend view showing Battery Volts and Solar Charge
//
window.trendsBattery = Backbone.View.extend({
trendModel: new TrendsModel(),
template: _.template(trendsTemplate),
chart: null,
chartoptions:{
chart: {
renderTo: 'chart-container',
},
rangeSelector: {
enabled: false,
},
title:{
text:'Battery Volts & Solar Amps'
},
xAxis: {
type:'datetime',
dateTimeLabelFormats: {month:'%e. %b',year:'%b'}
},
yAxis: [{
title :{text: 'Battery Volts'},
min: 22,
max: 32,
minorGridLineColor: '#E0E0E0',
},
{
title :{text: 'Solar Charge Amps'},
min: 0,
max: 16,
opposite: true,
},
],
series:[
{yAxis: 0, data: [], type: 'line', step: true, name: 'Battery Vdc'},
{yAxis: 1, data: [], type: 'line', step: true, name: 'Solar Amps'},
],
},
render:function() {
that = this;
$(this.el).html(this.template());
this.chartoptions.chart.width = (windowWidth);
this.chartoptions.chart.height = (windowHeight - 150);
setTimeout(function() {
chart = new Highcharts.StockChart(that.chartoptions);
chart.events ={load: that.requestData(this.chart) };
},20);
return this;
},
requestData: function(chart){
var querystring = '//myHostServer.com/myFolder/myPHP.php';
jQuery.get(querystring, null, function(csv, state, xhr) {
if (typeof csv !== 'string') {
csv = xhr.responseText;
};
csv = csv.split(/\n/g);
var vB_array = [];
var iS_array = [];
jQuery.each(csv, function (i, line) {
if (line.length > 1) {
line_array = line.split(',');
var date = parseInt(line_array[0]) * 1000;
var vBpoint = {};
var iSpoint = {};
vBpoint.x = date;
iSpoint.x = date;
vBpoint.y = parseFloat(line_array[1]);
iSpoint.y = parseFloat(line_array[4]);
vB_array.unshift(vBpoint);
iS_array.unshift(iSpoint);
};
});
chart.series[0].setData(vB_array, false); // <<<<< Problem Area
chart.series[1].setData(iS_array, false);
chart.redraw();
});
chart.xAxis[0].setExtremes(); // expand out the scrollbar when moving through time:
},
});