web-dev-qa-db-fra.com

comment changer la couleur des graphiques ng2?

J'ai ajouté des graphiques ng2 à mon projet et j'affiche 2 graphiques - donut et graphique à barres. les deux sont affichés en gris depuis que j'ai ajouté

    <base-chart class="chart"
                [colors]="chartColors"
                ...
    </base-chart>

au component.template.html et

public chartColors:Array<any> =[
    {
      fillColor:'rgba(225,10,24,0.2)',
      strokeColor:'rgba(11,255,20,1)',
      pointColor:'rgba(111,200,200,1)',
      pointStrokeColor:'#fff',
      pointHighlightFill:'#fff',
      pointHighlightStroke:'rgba(200,100,10,0.8)'
    }, ... (3x)

au component.ts

d'autres importations de paquets sont-elles nécessaires pour changer la couleur ou la configuration est-elle incorrecte? L'inspecteur html de Chromes affiche la sortie html suivante rendue

ng-reflect-colors="[object Object],[object Object],[object Object]"
angularng2-charts
17
edamerau

Vous devriez faire ceci comme:

  public chartColors: Array<any> = [
    { // first color
      backgroundColor: 'rgba(225,10,24,0.2)',
      borderColor: 'rgba(225,10,24,0.2)',
      pointBackgroundColor: 'rgba(225,10,24,0.2)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(225,10,24,0.2)'
    },
    { // second color
      backgroundColor: 'rgba(225,10,24,0.2)',
      borderColor: 'rgba(225,10,24,0.2)',
      pointBackgroundColor: 'rgba(225,10,24,0.2)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(225,10,24,0.2)'
    }];

La couleur grise est définie par défaut, ce qui signifie que vos options de couleur ne fonctionnent pas, en raison de noms de propriétés incorrects.

Voici un exemple, comment les propriétés des couleurs sont appelées:

ng2-charts-github-source-code

@ MISE À JOUR:

S'il est nécessaire de mettre à jour uniquement backgroundColor et rien d'autre, le code ci-dessous fonctionnera également.

public chartColors: Array<any> = [
    { // all colors in order
      backgroundColor: ['#d13537', '#b0o0b5', '#coffee', ...]
    }
]
31
ulou

Vous pouvez également le faire de cette manière:

<base-chart class="chart"
            [colors]="chartColors"
            ...
</base-chart>

et

public chartColors: any[] = [
      { 
        backgroundColor:["#FF7360", "#6FC8CE", "#FAFFF2", "#FFFCC4", "#B9E8E0"] 
      }];
41
Jorge Casariego
//.ts_file     

    public chartColors() {
            return [{
              backgroundColor: this.alert.severityColor,
              borderColor: 'rgba(225,10,24,0.2)',
              pointBackgroundColor: 'rgba(225,10,24,0.2)',
              pointBorderColor: '#fff',
              pointHoverBackgroundColor: '#fff',
              pointHoverBorderColor: 'rgba(225,10,24,0.2)'
          }]
        }


//.html_file

<div style="display: block">
          <canvas baseChart
                  [datasets]="barChartData()"
                  [options]="barChartOptions"
                  [legend]="barChartLegend"
                  [chartType]="barChartType"
                  [colors]="chartColors()"
                  (chartHover)="chartHovered($event)"
                  (chartClick)="chartClicked($event)"></canvas>
        </div>

Je devais changer la couleur des graphiques dynamiquement en fonction des valeurs et des couleurs attachées aux alertes. J'ai trouvé que @uluo avait une excellente réponse. Je l'ai changé d'une propriété de la classe en fonction et j'ai renvoyé l'objet avec les couleurs définies aux éléments dynamiques dans mes alertes. Ensuite, j'ai utilisé la fonction pour lier les couleurs de mon graphique et c'était magique. J'étais coincé sur ce problème depuis quelques heures!

J'espère que cela aide toute personne qui essaie de passer des valeurs dynamiques aux graphiques ng2 avec Angular!

3
Chris Jannenga