javascript - angular chart js设置条形图的填充颜色

Question

我想我快疯了——我确实浏览了所有图表 js 和 Angular 图表 js 文档和示例，但无法更改条形图的填充颜色。

现在我在 html 中有这个:

<canvas
  data-ng-show='graphType.bar'
  class="chart chart-bar graph"
  chart-data="data"
  chart-labels="labels"
  chart-colours=colorsEven>
</canvas>

在我的 Controller 中:

$scope.results = {'1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, '7': 0, '8': 0, '9': 0, '10': 0};
$scope.labels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];

//然后我有一个获取数据的 GET 请求

for (var i=0; i<res.data.length; i++) {
    $scope.results[res.data[i].Body] ++;
}
for (var key in $scope.results) {
    $scope.data.push($scope.results[key]);
}
$scope.colorsEven = [{ 
    fillColor: 'rgba(59, 89, 152,0.2)',
    strokeColor: 'rgba(59, 89, 152,1)',
    pointColor: 'rgba(59, 89, 152,1)',
    pointStrokeColor: '#fff',
    pointHighlightFill: '#fff',
    pointHighlightStroke: 'rgba(59, 89, 152,0.8)'
}];

我看不出我做错了什么？每个栏都必须有一个对象吗？所以在这种情况下有 10 个对象？顺便说一句，条形图填充得很好——标签和数据在它们应该在的地方。只是颜色不起作用。

编辑:澄清一下——我正在寻找所有颜色相同的条。

Answer 1

HTML 属性应该用"" 引起来。此外，它应该是 chart-dataset-override 而不是 chart-colours。

<canvas
  data-ng-show="graphType.bar"
  class="chart chart-bar graph"
  chart-data="dataProp"
  chart-labels="labels"
  chart-dataset-override="colorsEven">
</canvas>

要使 chart-dataset-override 工作，chart-data 必须是数据 Array 的 Array

$scope.dataProp = [$scope.data];