web-dev-qa-db-fra.com

Comment changer les couleurs pour Angular-Chart.js

J'utilise Angular-Chart.js (AngularJS Chart.js version) pour créer un graphique à barres. Le graphique fonctionne avec les options sauf pour les couleurs.

Même si je les mets, il est indiqué dans la documentation , ils restent gris.

<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>

En fait, les options fonctionnent mais les couleurs ne le sont pas. Est-ce que je fais quelque chose de mal?

javascriptangularjschartsbar-chartchart.js
25
Lucien Dubois

Votre objet colours devrait être déclaré comme un tableau 

"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

Pour plus d'informations, reportez-vous à cet article / ceci aussi.

Pour les versions plus récentes, voir la réponse de eli0tt , car les noms des paramètres ont changé.

44
Pankaj Parkar

J'avais le même problème. Dans la documentation, il est dit d'utiliser des "couleurs", mais une fois que j'ai mis à jour mon code HTML pour:

chart-colours 

avec un tableau angulaire de:

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

Ça a marché!

11
Kate S

Il semble que la dénomination ait encore changé. J'utilise angular-chart.js 1.0.3 et la gestion des couleurs pour les graphiques à barres fonctionne comme suit:

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

Dans la balise canvas, le nom de l'attribut est chart-colors

7
eli0tt

Comme @pankajparkar a dit. En ajoutant simplement que vous pouvez également transmettre des couleurs html et angular-chart.js, les objets de couleur seront définis correctement dans rgba avec les nuances appropriées, par exemple $scope.colors = ['#FD1F5E','#1EF9A1','#7FFD1F','#68F000'];

7
jtblin

En 2017, les diagrammes angulaires fonctionnaient avec le code suivant. 

  1. que les noms des éléments sont changés. Tiré du code source du diagramme angulaire. 

  2. de plus, dès que vous manquerez de couleurs, le diagramme angulaire les générera pour vous. Cela inclut une opacité de 0,2 pour les couleurs d'arrière-plan. 

  3. Si vous spécifiez #hex couleurs, l'opacité sera ajoutée.

Spécification de couleur via global.

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)'
  }
...

Dans le code source, le code de sélection des couleurs est actuellement. Les couleurs définies via les options Chart.js sont réinitialisées ici (je n'ai pas réussi à le faire fonctionner).

Choisissez les couleurs selon le code source angular-chart.js: 

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

Oui, si vous ne spécifiez pas d'objet, l'opacité est définie pour vous. De 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)
  };
}
6
Interlated

Tu voulais dire: "couleurs"

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

Nous pouvons également voir les autres attributs que nous pouvons modifier, tels que: légende, série, survol. À côté de chaque graphique, vous pouvez voir une option appelée "paramètres", c'est tout ce que vous pouvez changer.

2
Mayra Alejandra Rodriguez

Avec la dernière version, $ scope.colors ne semble pas fonctionner. Vous devez utiliserchart-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>

0
Sajeetharan