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

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

    <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 inspector отображает следующий вывод html

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

Ответы

Ответ 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-чарты-GitHub-исходный код

@UPDATE:

Если необходимо обновить только backgroundColor и больше ничего, приведенный ниже код также будет работать.

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

Ответ 2

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

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

и

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

Ответ 3

//.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>

Мне нужно было динамически менять цвет диаграмм на основе значений и цветов, прикрепленных к оповещениям. Я обнаружил, что у @uluo был отличный ответ. Я изменил его из свойства класса на функцию и возвратил объект с цветами, установленными для динамических элементов в моих предупреждениях. Затем я использовал функцию, чтобы связать цвета моей диаграммы, и это было волшебно. Я застрял на этой проблеме в течение нескольких часов!

Надеюсь, что это поможет любому, кто пытается передать динамические значения в ng2-диаграммы с Angular!