角图js设置条形图的填充颜色答案

【问题标题】：angular chart js set fill color of bar chart角图js设置条形图的填充颜色
【发布时间】：2017-02-01 03:30:41
【问题描述】：

我觉得我快疯了 - 我已经浏览了所有图表 js 和角度图表 js 文档和示例，但无法更改条形图的填充颜色。

现在我在 html 中有这个：

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

在我拥有的控制器中：

$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 个对象？顺便说一句，条形图填充得很好-标签和数据应该在哪里。只是颜色不起作用。

编辑：澄清 - 我正在寻找所有的酒吧都是相同的颜色。

【问题讨论】：

标签： javascript angularjs charts chart.js angular-chart

【解决方案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 必须是数据Arrays 的Array。

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

【讨论】：

chart-colors 代替 chart-colours 怎么样？
不，这仍然行不通-还要澄清一下。我希望使所有条形都具有相同的颜色...如果这有所作为。
根据官网的例子和源码，chart-colors必须是一个数组。
我在数组中有一个对象？我见过使用数组中的对象的示例...
你看到了哪个例子？

【解决方案2】：

正如您在此post 中看到的，命名已更改。如果您使用 angular-chart 1.0.3，则该属性为 chart-colors。

此外，fillColor 现在是 backgroundColor，您可以使用 borderColor 作为条形边框的颜色。

【讨论】：