Angular 图表 - 更改图表的颜色

Question

目前我正在使用 Angular 图表 API 来生成图表

我在这里使用了以下选项来获得图表中的颜色但是它没有按预期工作你能帮忙吗，这里有什么问题（我也附上了图片）

我想为饼图的每个部分设置不同的颜色

控制器

app.controller('PieCtrl', function($scope, myservice) {
  $scope.$on('values', function(event, data) {
    $scope.releasename = data.b;
    console.log(data);
    $scope.colors=['#803690', '#00ADF9', '#DCDCDC', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'];
    $scope.labels = data.b;
    $scope.series = ['My Series'];
    $scope.data = [
      data.c
    ];
  });
});

Canvas HTML

<div ng-controller="PieCtrl" class="col-md-3">
<canvas id="data" class="chart chart-pie" width="500px" height="200px" chart-data="data" chart-labels="labels" chart-colors="colors">
        chart-series="series"
</canvas>
</div>

实际图为

预期图表为

Answer 1

您可以使用 datasetOverride 属性为您的饼图设置不同的颜色。

HTML

<div ng-controller="PieCtrl" class="col-md-3">
<canvas id="data" class="chart chart-pie" width="500px" height="200px" chart-data="data" chart-labels="labels" chart-dataset-override="datasetOverride">
        chart-series="series"
</canvas>
</div>

控制器

app.controller('PieCtrl', function($scope, myservice) {
   $scope.$on('values', function(event, data) {
      $scope.releasename = data.b;
      $scope.labels = data.b;
      $scope.series = ['My Series'];
      $scope.data = [
         data.c
      ];
      $scope.datasetOverride = [{
         backgroundColor: ['#803690', '#00ADF9', '#DCDCDC', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360']
      }];
   });
});

Angular 图表 - 更改图表的颜色

Angular Chart - Changing the Colours of the Chart

charts

angularjs

angular-chart