如何更改 Angular-Chart.js 的颜色答案

【问题标题】：How to change colours for Angular-Chart.js如何更改 Angular-Chart.js 的颜色
【发布时间】：2015-04-23 05:23:37
【问题描述】：

我使用 Angular-Chart.js（AngularJS Chart.js 版本）来创建条形图。图表正在使用除颜色以外的选项。

即使我设置了它们，它也会显示为in the documentation，它们仍然是灰色的。

<div class="graph-display" ng-controller="chartController">
    <canvas class="chart chart-bar"
    data="bilans.data"
    labels="bilans.labels"
    series="bilans.series"
    options="{
        scaleShowHorizontalLines: true,
        scaleShowVerticalLines: false,
        tooltipTemplate: '<%= value %> $',
        responsive: true
    }"
    colours="{
    fillColor: 'rgba(47, 132, 71, 0.8)',
    strokeColor: 'rgba(47, 132, 71, 0.8)',
    highlightFill: 'rgba(47, 132, 71, 0.8)',
    highlightStroke: 'rgba(47, 132, 71, 0.8)'
    }"
    ></canvas>
</div>

实际上，选项有效，但颜色无效。我做错了吗？

【问题讨论】：

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

【解决方案1】：

您应该将colours 对象声明为数组

"colours": [{
    fillColor: 'rgba(47, 132, 71, 0.8)',
    strokeColor: 'rgba(47, 132, 71, 0.8)',
    highlightFill: 'rgba(47, 132, 71, 0.8)',
    highlightStroke: 'rgba(47, 132, 71, 0.8)'
}];

Working Plunkr

更多信息请参考this post / this。

对于较新的版本，请参阅eli0tt's answer，因为参数名称已更改。

【讨论】：

注意'你'我有“颜色”开始
@Dashu 你能签出指令github.com/jtblin/angular-chart.js/blob/master/…
highliftFill 和 highlightStroke 已更改，您需要在两者前面添加点。此外，您必须添加“pointColor”才能获得悬停时的颜色；）
@PankajParkar 你能看看我的问题吗：stackoverflow.com/questions/37056480/…
仅供参考，我发现一些版本使用名称“color”和其他“color”。在撰写本文时，它与文档中使用的拼写相矛盾。

【解决方案2】：

正如@pankajparkar 所说。只需添加您还可以传递 html 颜色和 angular-chart.js 将在 rgba 中正确定义颜色对象，并具有适当的细微差别，例如$scope.colors = ['#FD1F5E','#1EF9A1','#7FFD1F','#68F000'];

【讨论】：

【解决方案3】：

你想说：“颜色”

$scope.colours = ['#FD1F5E','#1EF9A1','#7FFD1F','#68F000'];

我们还可以看到我们可以更改的其他属性，例如：legend、series、hover。在每个图表旁边，您可以看到一个名为“设置”的选项，这就是您可以更改的全部内容。

【讨论】：

作为参考，angular-chart.js 已将命名从颜色更改为颜色 'chart-colours 现在是 chart-colors 而 chart-get-colour 现在是 chart-get-color' github.com/jtblin/angular-chart.js/tree/1.0.0

【解决方案4】：

我也遇到了同样的困难。在文档中它说使用“颜色”但是一旦我将我的 html 更新为：

chart-colours

带有角度数组：

$scope.colours = ['#72C02C', '#3498DB', '#717984', '#F1C40F'];

成功了！

【讨论】：

作为参考，angular-chart.js 已将命名从颜色更改为颜色 'chart-colours 现在是 chart-colors 而 chart-get-colour 现在是 chart-get-color' github.com/jtblin/angular-chart.js/tree/1.0.0

【解决方案5】：

名字好像又变了。我正在使用 angular-chart.js 1.0.3，条形图的颜色管理如下：

colors:[{
      backgroundColor:"#F00",
      hoverBackgroundColor:"#FF0",
      borderColor:"#0F0",
      hoverBorderColor:"#00F"
}];

在canvas标签中，属性名称为chart-colors

【讨论】：

【解决方案6】：

截至 2017 年，我得到了可以使用以下代码的角度图表。

元素的名称已更改。取自 angular-chart 源代码。
此外，一旦您用完颜色，角度图表就会为您生成它们。这包括背景颜色的不透明度为 0.2。
如果您指定 #hex 颜色，则会添加不透明度。

通过全局指定颜色。

app.config(['ChartJsProvider', function (ChartJsProvider) {

// Using ChartJsProvider.setOptions('bar', { didn't seem to work for me.
// Nor did $scope.chartColors. Although I only tried that in the controller.
Chart.defaults.global.colors = [
  {
    backgroundColor: 'rgba(78, 180, 189, 1)',
    pointBackgroundColor: 'rgba(78, 180, 189, 1)',
    pointHoverBackgroundColor: 'rgba(151,187,205,1)',
    borderColor: 'rgba(0,0,0,0',
    pointBorderColor: '#fff',
    pointHoverBorderColor: 'rgba(151,187,205,1)'
  }, {
    backgroundColor: 'rgba(229, 229, 229, 1)',
    pointBackgroundColor: 'rgba(229, 229, 229, 1)',
    pointHoverBackgroundColor: 'rgba(151,187,205,1)',
    borderColor: 'rgba(0,0,0,0',
    pointBorderColor: '#fff',
    pointHoverBorderColor: 'rgba(151,187,205,1)'
  }
...

在源代码中，当前是颜色选择代码。通过 Chart.js 选项设置的颜色在此处重置（我没有让它工作）。

根据 angular-chart.js 源代码选择颜色：

  var colors = angular.copy(scope.chartColors ||
    ChartJs.getOptions(type).chartColors ||
    Chart.defaults.global.colors

是的，如果您不指定对象，则会为您设置不透明度。来自 angular-chart.js：

function convertColor (color) {
  if (typeof color === 'object' && color !== null) return color;
  if (typeof color === 'string' && color[0] === '#') return getColor(hexToRgb(color.substr(1)));
  return getRandomColor();
}
...
function getColor (color) {
  return {
    backgroundColor: rgba(color, 0.2),
    pointBackgroundColor: rgba(color, 1),
    pointHoverBackgroundColor: rgba(color, 0.8),
    borderColor: rgba(color, 1),
    pointBorderColor: '#fff',
    pointHoverBorderColor: rgba(color, 1)
  };
}

【讨论】：

你先生，应该得到一块饼干。感谢您的出色解释，它解决了我的问题并结束了两个小时的搜索！
非常感谢，angularjs chartjs 网站已经过时了

【解决方案7】：

使用最新版本 $scope.colors 似乎不起作用。您需要使用 chart-dataset-override="colors"

演示

angular.module("app", ["chart.js"]).controller("DoughnutCtrl", function ($scope) {
  $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'];
  
  $scope.data = [
    [1, 3, 5, 8, 9, 10, 11, 12, 33, 5]
  ];
  $scope.colors = [{ 
    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)'
  }];
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Multi Slot Transclude</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
</head>
<body ng-app="app" ng-controller="DoughnutCtrl">
  <canvas
        class="chart chart-bar"
        chart-data="data"
        chart-labels="labels"
        chart-dataset-override="colors">
      </canvas>
</body>
</html>

【讨论】：