Как изменить цвета для Angular -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)'
}];

Рабочий Plunkr

Для получения дополнительной информации см. этот пост/этот.

Для более новых версий см. eli0tt answer, поскольку имена параметров изменены.

Ответ 2

У меня была такая же трудность. В документах говорится, что нужно использовать "цвета", но как только я обновил свой html до:

chart-colours

с массивом angular:

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

Это сработало!

Ответ 3

Как сказал @pankajparkar. Просто добавив, что вы также можете передавать цвета html, а angular -chart.js правильно определит цветные объекты в rgba с соответствующими нюансами, например. $scope.colors = ['#FD1F5E','#1EF9A1','#7FFD1F','#68F000'];

Ответ 4

Как и в 2017 году, я получил angular -схемы для работы со следующим кодом.

• чтобы имена элементов были изменены. Взято из исходного кода angular.

• также, что, как только вы закончите цвета angular -chart, они будут созданы для вас. Это включает непрозрачность 0,2 для цветов фона.

• Если вы укажете # прозрачность, будет добавлена ​​непрозрачность цвета.

Цветовая спецификация через глобальную.

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, здесь reset (я не получил этого, чтобы работать).

Выберите цвета в соответствии с исходным кодом 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)
  };
}

Ответ 5

Кажется, что именование снова изменилось. Я использую angular -chart.js 1.0.3, а управление цветом для гистограмм работает следующим образом:

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

В теге canvas имя атрибута цвета диаграммы

Ответ 6

Вы хотели сказать: "цвета"

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

Также мы можем увидеть другие атрибуты, которые мы можем изменить, например: legend, series, hover. Рядом с каждой диаграммой вы можете увидеть опцию "Настройки", что все, что вы можете изменить.

Ответ 7

С последней версией $scope.colors, похоже, не работает. Вам нужно использовать chart-dataset-override="colors"

DEMO

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>