Comment changer les couleurs pour Angular-Chart.js

- Je utiliser Angular-Chart.js (le AngularJS Chart.js version) pour créer un graphique à barres. Le Tableau est de travailler avec les options, sauf pour les couleurs.

Même si je les ai, 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 sont de travail, mais les couleurs ne sont pas. Suis-je en train de faire quelque chose de mal?

InformationsquelleAutor Lucien Dubois | 2015-02-21

45

Votre doit déclarer colours objet 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)'
}];
```
Travail Plunkr

Pour plus d'informations, reportez-vous ce post /cette trop.

Pour les versions plus récentes, voir eli0tt réponse, comme les noms de paramètres ont changé.
- L'esprit de la 'u' j'ai eu des "couleurs" de la commencer
- pourriez-vous la caisse de la directive github.com/jtblin/angular-chart.js/blob/master/...
- highliftFill et highlightStroke ont été modifiés et que vous avez besoin pour ajouter un point en face de tant de personnes. En outre, vous devez ajouter "pointColor" pour obtenir la couleur sur le vol stationnaire 😉
- pouvez-vous voir merci à ma question : stackoverflow.com/questions/37056480/...
- s'il vous plaît pouvez-vous voir ma question peut-être vous avez une idée stackoverflow.com/questions/37256487/...
- Pour info, j'ai trouvé certaines versions de ce pour utiliser le nom de "couleur" et autres "couleurs". Au moment de l'écrire, en contradiction avec l'orthographe utilisée dans la documentation.
- Quelle version est-ce Plunkr à l'aide? Je ne peux pas le faire fonctionner avec le courant angular-chart.js
- Pouvez-vous mettre plunkr ici? Je vais vous aider à faire fonctionner
InformationsquelleAutor Pankaj Parkar
12

J'ai eu la même difficulté. Dans la doc il est dit d'utiliser "couleurs" cependant, une fois j'ai mis à jour mon code html à:

chart-colours

avec un angulaire tableau de:

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

Il a travaillé!
- pour référence, angular-chart.js a changé de dénomination des couleurs aux couleurs de graphique des couleurs est maintenant de carte des couleurs et graphique-obtenir-la couleur est maintenant graphique-get-couleur' github.com/jtblin/angular-chart.js/tree/1.0.0
InformationsquelleAutor Kate S
7

Comme @pankajparkar dit. Juste en ajoutant que vous pouvez également passer html de couleurs et de angular-chart.js permettra de définir la couleur des objets en rgba avec le bon de nuances par exemple $scope.colors = ['#FD1F5E','#1EF9A1','#7FFD1F','#68F000'];

InformationsquelleAutor jtblin
7

Il semble que la nomenclature a changé à nouveau. Je suis en utilisant angular-chart.js 1.0.3 et de gestion des couleurs pour les graphiques à barres fonctionne comme ceci :
```
colors:[{
      backgroundColor:"#F00",
      hoverBackgroundColor:"#FF0",
      borderColor:"#0F0",
      hoverBorderColor:"#00F"
}];
```
Dans la balise canvas, le nom de l'attribut est graphique-couleurs

InformationsquelleAutor eli0tt

Au en 2017, je me suis angulaires-cartes de travailler avec le code suivant.

que les noms des éléments sont modifiés. Pris de la angulaires-le graphique du code source.
aussi que dès que vous exécutez hors de couleurs angulaires-graphique va générer pour vous. Cela comprend une opacité de 0,2 pour les couleurs d'arrière-plan.
Si vous spécifiez #hex couleurs opacité sera ajouté.

Spécification de la couleur via mondial.

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 de la couleur de la cueillette code est actuellement. Ensemble des couleurs via Chart.js options de réinitialisation ici (je n'ai pas que cela fonctionne).

Choisir les couleurs que par angular-chart.js code source:

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

Oui, si vous ne spécifiez pas un objet, l'opacité est définie pour vous. À partir 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, monsieur, méritent un cookie. Merci pour votre excelent explication, il a résolu mon problème et s'est terminée à deux heures de recherche!
Merci beaucoup, le angularjs chartjs site est obsolète

InformationsquelleAutor Interlated

2

Que vous avez voulu dire: "couleurs"
```
$scope.colours = ['#FD1F5E','#1EF9A1','#7FFD1F','#68F000'];
```
Aussi, nous pouvons voir les autres attributs Que nous pouvons changer , comme : la légende , de la série, passez la souris . En regard de chaque graphique, vous pouvez voir l'option "paramètres ", c'est tout ce que vous pouvez changer.
- pour référence, angular-chart.js a changé de dénomination des couleurs aux couleurs de graphique des couleurs est maintenant de carte des couleurs et graphique-obtenir-la couleur est maintenant graphique-get-couleur' github.com/jtblin/angular-chart.js/tree/1.0.0
InformationsquelleAutor Mayra Alejandra Rodriguez

Avec la dernière version $champ d'application.les couleurs ne semble pas fonctionner. Vous avez besoin d'utiliser chart-dataset-override="colors"

DÉMO

JS:

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)'
  }];
});

HTML:

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

InformationsquelleAutor Sajeetharan

Vous devez vous connecter pour publier un commentaire.