Javascript 当使用角度选项卡时，Chart.js将画布宽度和高度设置为0

当我调用一个新选项卡时，画布的宽度和高度设置为0，我看不到该选项卡中的图形。我已经看到了这个问题的其他答案，但它们都在jquery中，我的整个应用程序目前都在angular中

这是html

<div class="container col-xs-10">
                <h3>Comparison Results</h3>
                <section ng-app="myApp" ng-controller="TabController as tab">

                    <ul class="nav nav-pills">
                        <li ng-class="{active:tab.isSet(1)}"><a href ng-click="tab.setTab(1)">Exe Count</a></li>
                        <li ng-class="{active:tab.isSet(2)}"><a href ng-click="tab.setTab(2)">Exe Time</a></li>
                        <li ng-class="{active:tab.isSet(3)}"><a href ng-click="tab.setTab(3)">CPU Time</a></li>
                        <li ng-class="{active:tab.isSet(4)}"><a href ng-click="tab.setTab(4)">Wait Time</a></li>
                        <li ng-class="{active:tab.isSet(5)}"><a href ng-click="tab.setTab(5)">Rows Read</a></li>
                        <li ng-class="{active:tab.isSet(6)}"><a href ng-click="tab.setTab(6)">Rows Written</a></li>
                        <li ng-class="{active:tab.isSet(7)}"><a href ng-click="tab.setTab(7)">Logical Reads</a></li>
                        <li ng-class="{active:tab.isSet(8)}"><a href ng-click="tab.setTab(8)">Physical Reads</a></li>
                    </ul>

                    <div ng-show="tab.isSet(1)">
                        <canvas id="numExe" width="1400" height="550"></canvas>
                    </div>

                    <div ng-show="tab.isSet(2)">
                        <canvas id="exeTime" width="1400" height="550"></canvas>
                    </div>

                    <div ng-show="tab.isSet(3)">
                        <canvas id="cpuTime" width="1400" height="550"</canvas>

                    </div>
                </section>

---

}))

也许如果你提供一个提琴或一个plunker有人可以帮助你…我会的，但是页面连接到一个本地servlet，我将无法重新创建问题也许如果你提供一个提琴或plunker有人可以帮助你…我会的，但是页面连接到一个本地servlet，我将无法重新创建问题

$scope.makeGraph = function(){    
var numExeData = {
            labels : numExe.hash,
            datasets : [ {
                label : "Baseline",
                fillColor : "rgba(220,220,220,0.5)",
                strokeColor : "rgba(220,220,220,0.8)",
                highlightFill : "rgba(220,220,220,0.75)",
                highlightStroke : "rgba(220,220,220,1)",
                data : numExe.base
            }, {
                label : "Comparative",
                fillColor : "rgba(151,187,205,0.5)",
                strokeColor : "rgba(151,187,205,0.8)",
                highlightFill : "rgba(151,187,205,0.75)",
                highlightStroke : "rgba(151,187,205,1)",
                data : numExe.compare
            } ]
        };

    var exeTimeData = {
        labels : exeTime.hash,
        datasets : [ {
            label : "Baseline",
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,0.8)",
            highlightFill : "rgba(220,220,220,0.75)",
            highlightStroke : "rgba(220,220,220,1)",
            data : exeTime.base
        }, {
            label : "Comparative",
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,0.8)",
            highlightFill : "rgba(151,187,205,0.75)",
            highlightStroke : "rgba(151,187,205,1)",
            data : exeTime.compare
        } ]
    };

    var cpuTimeData = {
            labels : cpu.hash,
            datasets : [ {
                label : "Baseline",
                fillColor : "rgba(220,220,220,0.5)",
                strokeColor : "rgba(220,220,220,0.8)",
                highlightFill : "rgba(220,220,220,0.75)",
                highlightStroke : "rgba(220,220,220,1)",
                data : cpu.base
            }, {
                label : "Comparative",
                fillColor : "rgba(151,187,205,0.5)",
                strokeColor : "rgba(151,187,205,0.8)",
                highlightFill : "rgba(151,187,205,0.75)",
                highlightStroke : "rgba(151,187,205,1)",
                data : cpu.compare
            } ]
        };

     var numExe = document.getElementById("numExe").getContext("2d");
     var numExeChart = new Chart(numExe).Bar(numExeData, { multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>", barValueSpacing: 20 });

     var exeTime = document.getElementById("exeTime").getContext("2d");
     var exeTimeChart = new Chart(exeTime).Bar(exeTimeData, { multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>", barValueSpacing: 20 });

     var cpuTime = document.getElementById("cpuTime").getContext("2d");
     var cpuTimeChart = new Chart(cpuTime).Bar(cpuTimeData, { multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>", barValueSpacing: 20 });
}

app.controller('TabController', function() {
this.tab = 1;
this.setTab = function(tabId) {
    this.tab = tabId;
};

this.isSet = function(tabId) {
    return this.tab === tabId;
};