Javascript 无法在同一页面上呈现两个画布元素-主干

我有一个包含两个id的主图表视图，主图表视图包含两个视图：PieChartView和LineChartView

但是，当仅渲染一个渲染而另一个画布元素出现错误时，两个视图都有模板

    this.line.setElement(this.$('#id-sales-line')).delegateEvents().render();
    this.pie.setElement(this.$('#id-sales-pie')).delegateEvents().render();

完整代码：

Uncaught TypeError: Cannot read property 'getContext' of null

---

当页面第一次呈现时，它不会为我呈现第二个setElement代码。

您能创建一个JSFIDLE吗？有了您共享的信息，很难说出我的主视图代码，我无法创建JSFIDLE，因为它使用Browserify

Uncaught TypeError: Cannot read property 'getContext' of null

 var $ = require('jquery'),
    Handlebars = require('handlebars'),
    Backbone = require('backbone'),
    mainchartTemplate = require('../../templates/dashboard/chartscontainer.html'),
    pieChartView = require('../../views/dashboard/PieChartView'),
    lineChartView = require('../../views/dashboard/LineChartView'),
    moment = require('moment');

var MainChartView = Backbone.View.extend({
    el: $('#id-charts-stats'),

    initialize: function() {

        this.pie = new pieChartView();
        this.line = new lineChartView();



    },
    events: {
        'click a.agraphType': "changeGraphData"
    },

    changeGraphData: function(ev) {

        ev.preventDefault();

        var type = $(ev.target).attr('type');

        sessionStorage.setItem("typeOfGraph", type);


        this.render();

    },

    render: function() {
        this.$el.html(mainchartTemplate);

        if (this.line) {
            this.line.remove();
        }

        this.line.setElement(this.$('#id-sales-line')).delegateEvents().render();

        if (this.pie) {
            this.pie.remove();
        }

        this.pie.setElement(this.$('#id-sales-pie')).delegateEvents().render();



    }
});

module.exports = MainChartView;