Как изменить цвет для ng2-диаграмм?

Question

Я добавил ng2-диаграммы в свой проект и отображаю 2 диаграммы - пончик & barchart. оба отображаются серым, поскольку я добавил

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

к component.template.html и

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) 

к component.ts

любые другие виды импорта пакетов, необходимый для изменения цвета или настройка неправильно? Chromes HTML инспектор показывает следующий HTML вывод вынесенного

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

Answer 1

Вы должны сделать это как:

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

Серого цвета устанавливаются по умолчанию, Что означают ваши варианты цветов не работает, потому что неправильных имен свойств.

Вот вам пример, как называются цвета свойства:

ng2-charts-github-source-code

Answer 2

Также вы можете сделать это следующим образом:

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

и

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