Wie ändere ich die Farbe für ng2-Charts?

Question

Ich habe ng2-Charts zu meinem Projekt hinzugefügt und 2 Charts angezeigt - Donut & balkart. beide sind in grau angezeigt, da i

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

zum component.template.html und

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) 

hinzugefügt, um die component.ts

sind jedes andere Paket Importe notwendig, die Farbe zu ändern, oder ist die Setup falsch? Chromes html Inspektor zeigt die folgende HTML-Ausgabe gerendert

ng-reflect-colors="[object Object],[object Object],[object Object]" 

Answer 1

Sie tun sollten diese wie:

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

Grau Farbe standardmäßig eingestellt ist, was Ihre Farboptionen bedeuten nicht funktioniert, weil von falschen Eigenschaftennamen.

Hier haben Sie beispielsweise, wie Farben Eigenschaften werden genannt:

ng2-charts-github-source-code

Answer 2

Auch können Sie es auf diese Weise tun:

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

und

public chartColors: any[] = [ 
     { 
     backgroundColor:["#FF7360", "#6FC8CE", "#FAFFF2", "#FFFCC4", "#B9E8E0"] 
     }];