Angular js饼图样式

Question

如何设置angularjs-chart的饼图样式，如下所示：

angularjs-chart上有一些示例，例如：

这个适合我的需要，我只需要改变颜色并使线条更细。就像上面那个。

我确实尝试过图表颜色和图表选项。第一个是根本不工作，我不知道如何使用选项。

这是代码：

控制器中的

：

app.controller('DashboardController', function DashboardController ($scope) {
    $scope.labels = ["Download Sales"];
    $scope.data = [100];
});

在HTML中：

<canvas id="doughnut" class="chart chart-doughnut"
    chart-data="data" chart-labels="labels">
</canvas> 

这就是我得到的：

Answer 1

首先，您的 $scope.data 数组应为......

$scope.data = [
   [100]
];

要设置/更改饼图/圆环图的颜色，请在中将 backgroundColor 属性设置为颜色值（s）的数组$scope.datasetOverride

$scope.datasetOverride = [{
   backgroundColor: ['#67d2c4']
}];

并且，为了使线更细，请将 cutoutPercentage 属性设置为 $scope.options （瘦度） >

$scope.options = {
   cutoutPercentage: 80
}

另外，请务必在HTML标记中添加 chart-dataset-override 指令。

::工作示例::

var app = angular.module('app', ['chart.js']);

app.controller("DashboardController", function($scope) {
   $scope.labels = ["Download Sales"];
   $scope.data = [
      [100]
   ];
   $scope.options = {
      cutoutPercentage: 80 //set as you wish
   }
   $scope.datasetOverride = [{
      backgroundColor: ['#67d2c4']
   }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
<div ng-app="app" ng-controller="DashboardController">
   <canvas class="chart chart-doughnut" chart-data="data" chart-labels="labels" chart-options="options" chart-dataset-override="datasetOverride"></canvas>
</div>