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

Question

<div class="col-lg-5" id="id-sales-pie">


</div>

<div class="col-lg-7" id="id-sales-line">



</div>

MainChartView

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

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

两个视图都有模板但是当只渲染一个渲染而另一个canvas元素给出错误时

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;

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