Question

我只想使用Chart

创建一个饼图

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

代码复制在=＆gt;下面

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 =＆gt;

<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

＆＃13;

padding

＆＃13;

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,
  }]

});

＆＃13;

angular指令不适用于chartjs

1 个答案: