Comment changer les couleurs pour Angular-Chart.js

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

Même si je les définis, 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?

Vous devriez déclarer l'objet de colours 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)' }]; 

Travailler Plunkr

Pour plus d'informations, reportez – vous à cette publication / ceci aussi.


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

J'avais la même difficulté. Dans les docs, il dit d'utiliser "couleurs", mais une fois que j'ai mis à jour mon html pour:

chart-colours

Avec un réseau angulaire de:

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

Ça a marché!

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

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

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

Dans la balise de toile, le nom de l'attribut est des couleurs graphiques

En 2017, j'ai des diagrammes angulaires pour travailler avec le code suivant.

  1. Que les noms des éléments sont modifiés. Tiré du code source du tableau angulaire.

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

  3. Si vous spécifiez #hex, l'opacité des couleurs 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 de Chart.js sont réinitialisées ici (je n'ai pas réussi à fonctionner).

Choisissez des 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) }; } 

Vous vouliez dire: "couleurs"

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

Aussi, nous pouvons voir les autres attributs que nous pouvons modifier, comme: la légende, la série, le vol stationnaire. À côté de chaque graphique, vous pouvez voir une option appelée «paramètres», c'est tout ce que vous pouvez modifier.