在angularjs 1.5.8中使用Chartjs的饼图，组件未显示在视图中

我想使用Chart.js在现有angular应用程序上创建一个类似仪表板的功能。因此，我为仪表板创建了一个视图

<md-content layout-padding layout-fill flex class="animated fadeIn">
    <div layout-padding>
        <md-card-title>
            <md-card-title-text>
                <span class="md-headline">Dashboard</span>
            </md-card-title-text>
        </md-card-title>
    </div>
    <md-divider></md-divider>
    <div>
        <md-grid-list md-cols-gt-md="12" md-cols-sm="3" md-cols-md="8"
                      md-row-height-gt-md="1:1" md-row-height="4:3"
                      md-gutter-gt-md="8px" md-gutter-gt-sm="4px" md-gutter="2px">
            <md-grid-tile md-colspan-gt-sm="3" md-rowspan-gt-sm="3">
               <pie-chart header="'Auths'" auth-counts="ctrl.authCounts" flex-gt-sm></pie-chart>
            </md-grid-tile>
        </md-grid-list>
    </div>
</md-content>

然后，组件

饼图
如下所示

(function () {
    'use strict';

    angular.module('chart')
        .component('pieChart', {
            controller: PieChartComponentController,
            templateUrl: 'Scripts/src/views/dashboard/pie.chart.template.html',
            bindings: {
                header: '<',
                authCounts: '<'
            }
        });

    PieChartComponentController.$inject = ['$timeout'];

    function PieChartComponentController($timeout) {

        var $ctrl = this;


        $ctrl.$onInit = function () {

            var myPieChart;
            var data;
        }

        $ctrl.isArrayEmpty = function (authCount) {

            if (!authCount) return true;
            return authCount.length === 0;

        }


        $ctrl.createChart = function () {
            var pieData = {
                labels: ["Purple","Green","Orange","Yellow"],
                datasets: [
                    {
                      data: [20, 40, 10, 30],
                      backgroundColor: ["#878BB6","#4ACAB4","#FF8153","#FFEA88"]
                    }
                ]
            };

            var ctx = document.getElementById("myPieChart").getContext("2d");

            var myPieChart = new Chart(ctx, {
                type: 'pie',
                data: pieData
            });


        } // end createChart()
    }
})();

看起来一切正常，但画布的高度和宽度为0，图表未呈现

但是，如果我删除
饼图
组件，将
元素放在仪表板模板的外部，并将数据放在仪表板中，则会呈现图表。但那不是我想做的。我需要有每种类型的组件。那么，我做错了什么导致了这种行为

我还尝试了显示相同行为的
angularchart.js
。如果我将
元素放在仪表板模板中，它会显示图表，但不会从
饼图
元素内部显示。我需要帮助排除故障。我肯定错过了一些东西，但我不知道是什么。画布是在提供数据之前呈现的，还是有什么事情我忽略了（或忘记了）？
是不是$onInit（）angular 2.x语法？您的问题是您正在使用1.5.x。是否
仪表板控制器
控制器别名为
ctrl
？是。我一定是错过了添加路由器。我会更新的question@Ericson578，$onInit也在1.5.x中。在创建画布之前，我必须放置
ng if=“$ctrl.authCounts”
。我一补充这一点，它就奏效了。
(function () {
    'use strict';

    angular.module('chart')
        .component('pieChart', {
            controller: PieChartComponentController,
            templateUrl: 'Scripts/src/views/dashboard/pie.chart.template.html',
            bindings: {
                header: '<',
                authCounts: '<'
            }
        });

    PieChartComponentController.$inject = ['$timeout'];

    function PieChartComponentController($timeout) {

        var $ctrl = this;


        $ctrl.$onInit = function () {

            var myPieChart;
            var data;
        }

        $ctrl.isArrayEmpty = function (authCount) {

            if (!authCount) return true;
            return authCount.length === 0;

        }


        $ctrl.createChart = function () {
            var pieData = {
                labels: ["Purple","Green","Orange","Yellow"],
                datasets: [
                    {
                      data: [20, 40, 10, 30],
                      backgroundColor: ["#878BB6","#4ACAB4","#FF8153","#FFEA88"]
                    }
                ]
            };

            var ctx = document.getElementById("myPieChart").getContext("2d");

            var myPieChart = new Chart(ctx, {
                type: 'pie',
                data: pieData
            });


        } // end createChart()
    }
})();

    <div layout-align="start center" ng-if="$ctrl.isArrayEmpty($ctrl.authCounts)">
        Not enough information available to create the chart.
    </div>

    <canvas id="myPieChart" width="250" height="250" ng-init="$ctrl.createChart()" ng-if="$ctrl.isArrayEmpty($ctrl.authCounts)" flex-gt-sm></canvas>

</md-card-content>