angular指令不适用于chartjs

Question

我只是想使用Chart创建一个饼图

使用AngularJS时，当我将静态数据放在重复（ ng-repeat ）上时。 它工作正常，并创建了两个以上的图表。

代码复制到下面=>

app.directive('doughnutChart', function ($timeout) {
return {
    restrict: 'A',
    scope: {
        name: '@',
        todo: '@',
        inprogress: '@',
        complete: '@'
    },

    link: function (scope, element) {
        alert(scope.todo);
        alert(scope.inprogress);
        alert(scope.complete);
        var doughnutData = {
            labels: ["To do", "In Progress", "Completed"],
            datasets: [{
                data: [scope.todo, scope.inprogress, scope.complete],
                backgroundColor: ["#a3e1d4", "#1be0b8", "#1ab394"]
            }]
        }

        var doughnutOptions = {
            cutoutPercentage: 30,
            responsive: true,
            legend: {
                labels: {
                    boxWidth: 20
                }
            },
            title: {
                display: true,
                text: scope.name,
                fontSize: 16,
                fontStyle: 'normal',
                fontColor: '#676a6c'
            }
        };

        $timeout(function () {
            new Chart(element[0].getContext("2d"), { type: 'doughnut', data: doughnutData, options: doughnutOptions });
        }, 1000)
    }
}
});

和我的html =>

<div ng-repeat="project in Projects" ng-if="project.todoTask != 'NaN'">
     {{project.todoTask}}
     {{project.inprogressTask}}
     {{project.completeTask}}
     <iframe class="chartjs-hidden-iframe Project-Chart"></iframe>
     <canvas doughnut-chart name="{{project.name}}" todo="{{project.todoTask}}" inprogress="{{project.inprogressTask}}" complete="{{project.completeTask}}" width="250" height="250"></canvas>
</div>

如果我将静态数据放在{{}} （角）上，它将很好地工作。 这里的名字是字符串， todo inprogress和complete的数字。

Answer 1

 angular.module("app", []).directive('doughnutChart', function($timeout) { return { restrict: 'A', scope: { name: '@', todo: '@', inprogress: '@', complete: '@' }, link: function(scope, element) { var doughnutData = { labels: ["To do", "In Progress", "Completed"], datasets: [{ data: [scope.todo, scope.inprogress, scope.complete], backgroundColor: ["#a3e1d4", "#1be0b8", "#1ab394"] }] } var doughnutOptions = { cutoutPercentage: 30, responsive: true, legend: { labels: { boxWidth: 20 } }, title: { display: true, text: scope.name, fontSize: 16, fontStyle: 'normal', fontColor: '#676a6c' } }; $timeout(function() { new Chart(element[0].getContext("2d"), { type: 'doughnut', data: doughnutData, options: doughnutOptions }); }, 1000) } } }).controller("controller", function($scope) { $scope.Projects = [{ "name": "One", "todoTask": 123, "inprogressTask": 33, "completeTask": 432, }, { "name": "two", "todoTask": 12343, "inprogressTask": 3234, "completeTask": 42342, }] }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script> <div ng-app="app" ng-controller="controller"> <div ng-repeat="project in Projects" ng-if="project.todoTask != 'NaN'"> <canvas height="100" width="200" doughnut-chart name="{{project.name}}" todo="{{project.todoTask}}" inprogress="{{project.inprogressTask}}" complete="{{project.completeTask}}" width="250" height="250"></canvas> </div> </div>