Javascript Highcharts使用Backbone.js重新加载问题

我正在努力解决一个问题，在导航到另一个视图，然后返回到同一个图表视图后，重新绘制图表

我使用Backbone.js和下划线作为我的应用程序的MVC和模板解决方案。 当我一开始导航到图表页面时，效果很好，但是如果我离开然后回来，我会得到一个“TypeError:chart.series[0]在控制台日志中未定义”

我突出显示了下面代码中发生错误的那一行，靠近结尾

我的想法是，我可能需要在某个时候销毁（）图表，但我不确定我将在哪里这样做，以及它是否能解决我的问题

我最近将脚本更改为现在使用HighStock“HighStock JS v1.3.6（2013-10-04）”，而之前的HighCharts版本是2.3.5，在那里我似乎没有这个问题

该应用程序是在线直播的。如果有人真的需要或想看到它的运行，请告诉我

下面的代码部分是主干路由器调用的函数。 如果需要其他部分的代码，请告诉我

如有任何建议，我将不胜感激

编辑： 我已经成功地在JSFIDLE中获得了这个，任何人都可以查看这个问题。

Clickty咔嗒一声，你的怒火在这里

当您第一次运行它时，将显示一个趋势。
然后点击“转到其他页面”链接，您将得到一个相当空白的页面。
在该页面上有一个链接，可将您带回趋势页面。
点击该链接会使您返回，但由于上述错误，趋势无法正确呈现

//=================================================================================
//  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:
    },
});

//=================================================================================
//趋势电池
//显示电池电压和太阳能充电的简单趋势图
//
window.trendsBattery=Backbone.View.extend({
趋势模型：新的趋势模型（），
模板：u.模板（trendsTemplate），
图表：空，
图表选项：{
图表：{
renderTo:'图表容器'，
},
范围选择器：{
启用：false，
},
标题：{
文字：“电池电压和太阳能安培”
},
xAxis：{
类型：'datetime'，
dateTimeLabelFormats:{月：'%e.%b'，年：'%b'}
},
亚克斯：[{
标题：{text:'电池电压'}，
民:22,，
最高：32，
minorGridLineColor:“#e0”，
},
{
标题：{text:'太阳能充电安培数'}，
分:0,，
最高：16，
相反：是的，
},
],
系列：[
{yAxis:0，数据：[]，类型：'line'，步骤：true，名称：'Battery Vdc'}，
{yAxis:1，数据：[]，类型：'line'，步骤：true，名称：'Solar Amps'}，
],
},
render:function（）{
那=这个；
$（this.el）.html（this.template（））；
this.chartoptions.chart.width=（windowWidth）；
this.chartoptions.chart.height=（窗口高度-150）；
setTimeout（函数（）{
chart=新的Highcharts.StockChart（即.chartoptions）；
chart.events={load:that.requestData（this.chart）}；
},20);
归还这个；
},
requestData:函数（图表）{
var querystring='//myHostServer.com/myFolder/myPHP.php'；
get（querystring，null，函数（csv，state，xhr）{
如果（csv的类型！=='string'）{
csv=xhr.responseText；
};
csv=csv.split（/\n/g）；
var vB_数组=[]；
var是_数组=[]；
jQuery.each（csv，函数（i，行）{
如果（线长度>1）{
line_数组=line.split（'，'）；
var date=parseInt（行数组[0]）*1000；
var vBpoint={}；
var iSpoint={}；
vBpoint.x=日期；
iSpoint.x=日期；
vBpoint.y=parseFloat（line_数组[1]）；
iSpoint.y=parseFloat（line_数组[4]）；
vB_array.unshift（vBpoint）；
iS_array.unshift（iSpoint）；
};
});
chart.series[0].setData（vB_数组，false）；//我刚刚用我在评论中提供的建议更新了JSFIDLE，它正在工作

window.trendView = Backbone.View.extend({
    trendModel: new TrendsModel(),
    template: _.template(trendTemplate),
    chart: null,
    getChartOptions: function () {
        return {
            chart: {
                animation: true,
                renderTo: 'chart-container',
                backgroundColor: '#fff'
            },
            rangeSelector: {
                enabled: false
            },
            title: {
                text: 'Battery Volts & Solar Amps'
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {
                    month: '%e. %b',
                    year: '%b'
                } // don't display the dummy year:
            },
            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());
        var chartOptions = that.getChartOptions();
        chartOptions.chart.width = (windowWidth - 50);
        chartOptions.chart.height = (windowHeight - 50);
        setTimeout(function () {
            chart = new Highcharts.StockChart(chartOptions);
            chart.events = {
                load: that.requestData(this.chart)
            };
        }, 20);
        return this;
    },
    requestData: function (chart) {
        var querystring = '//paulalting.com/hydrosolar/clientGET.php?id=trendVolts&start=6400&size=200';
        console.log(querystring);
        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], 10) * 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:
    }
});

window.trendView=Backbone.View.extend({
趋势模型：新的趋势模型（），
模板：uu.template（趋势模板），
图表：空，
getChartOptions:函数（）{
返回{
图表：{
动画：没错，
renderTo:'图表容器'，
背景颜色：“#fff”
},
范围选择器：{
已启用：false
},
标题：{
文字：“电池电压和太阳能安培”
},
xAxis：{
键入：“日期时间”，
日期时间标签格式：{
月份：'%e.%b'，
年份：'%b'
}//不显示虚拟年份：
},
亚克斯：[{
标题：{
文字：“电池电压”
},
民:22,，
最高：32，
minorGridLineColor:“#e0”
}, {
标题：{
文字：“太阳能充电安培”
},
分:0,，
最高：16，
相反：对
}],
系列：[{
雅克斯：0，
数据：[]，
键入：“行”，
步骤：正确，
名称：'蓄电池Vdc'
}, {
亚克西斯:1,，
数据：[]，
键入：“行”，
步骤：正确，
名称：“太阳能放大器”
}]
}
},
渲染：函数（）{
那=这个；
$（this.el）.html（this.template（））；
var chartOptions=that.getChartOptions（）；
chartOptions.chart.width=（windowWidth-50）；
chartOptions.chart.height=（窗口高度-50）；
setTimeout（函数（）{
图表=新的Highcharts.StockChart（图表选项）；
chart.events={