javascript - Backbone.js 的 Highcharts 重新加载问题

Question

我正在努力解决在导航到另一个 View 后重新绘制图表然后返回到同一图 TableView 时遇到的问题。

我正在使用 Backbone.js 和 Underscore 作为我的应用程序的 MVC 和模板解决方案。当我最初导航到图表页面时效果很好，但如果我离开然后再回来，我会在控制台日志中收到 `TypeError: chart.series[0] is undefined。

我已经突出显示了下面代码中发生错误的行，接近尾声。

我的想法是我可能需要在某个时候销毁()图表，但我不确定我会在哪里做这件事以及它是否会解决我的问题。

我最近将脚本更改为现在使用早期 HighCharts ver 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:
    },
});

Answer 1

我刚刚根据我在评论中提供的建议更新了 jsfiddle，它正在运行。

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

这是链接

http://jsfiddle.net/pqKWj/14/

如果您有兴趣让我知道，我在代码中看到了更多类似的问题，我认为目前还好，但是当您在同一页面中有 2 个图表等时会产生问题。我们可以讨论