我正在努力解决在导航到另一个视图后重新绘制图表然后返回到同一个图表视图时遇到的问题。
我正在使用 Backbone.js 和 Underscore 作为我的应用程序的 MVC 和模板解决方案。当我最初导航到图表页面时，它工作得很好，但是如果我离开然后回来，我会得到一个`TypeError：控制台日志中未定义chart.series [0]。
我在下面的代码中突出显示了错误发生的行，接近结尾。
我的想法是我可能需要在某个时候销毁（）图表，但我不确定我会在哪里执行此操作以及它是否可以解决我的问题。
我最近将脚本更改为现在使用早期 HighCharts 版本 2.3.5 中的 HighStock 'Highstock JS v1.3.6 (2013-10-04)'，我似乎没有这个问题。
如果有人真的需要或想看到它的实际应用，该应用程序已上线，请告诉我。
以下代码部分是主干路由器调用的函数。如果需要其他代码部分，请告诉我。
我将不胜感激任何建议。
编辑：
我已经设法在 JSFiddle 中得到这个供任何人查看问题。
Clickty 在这里敲响你的愤怒无尾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:
},
});