ng2-charts & chart.js - изменить цвет фона - PullRequest
Новая
       48

ng2-charts & chart.js - изменить цвет фона

0 голосов
/ 11 ноября 2018

Я работаю с Angular 6 и пытаюсь изменить цвет фона моей кольцевой диаграммы, которую я только что создал с chart.js.

Я следовал приведенному здесь примеру: https://www.js -tutorials.com / angularjs-tutorial / angular-6-chart-tutorial-using-chart-js /

Но независимо от того, как я пытаюсь изменить цвет фона, как показано в этом примере, или как-то иначе, цвета всегда совпадают с цветами по умолчанию, предоставляемыми библиотекой.

Может кто-нибудь помочь показать мне способ переопределить это, пожалуйста?

component.html: 

  <canvas baseChart
          [data]="doughnutChartData"
          [labels]="doughnutChartLabels"
          [chartType]="doughnutChartType"
          [options]="doughnutChartOptions"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"></canvas>

component.ts: 

  public doughnutChartLabels: string[] = ['Running', 'Paused', 'Stopped'];
  public doughnutChartData: number[] = [this.activeProducers, this.pausedProducers, this.invalidProducers];
  public doughnutChartType = 'doughnut';
  public doughnutChartOptions: any = {
    backgroundColor: [
      'Red',
      'Yellow',
      'Blue',
    ],
    responsive: false,
  };

enter image description here

Цвета, которые я хочу:

  • Бег: #ced
  • Приостановлено: #fda
  • Остановлено: # fdd

Создан стекаблитц: https://stackblitz.com/edit/angular-ctydcu

1 Ответ

0 голосов
/ 12 ноября 2018

Добавьте следующее свойство: 

 private donutColors = [
    {
      backgroundColor: [
        '#ced',
        '#fda',
        '#fdd',
      ]
    }
  ];

Обратите внимание, что это массив, а не объект

Затем добавьте следующее свойство в шаблон 

[colors]="donutColors"

Вот демонстрация Stackblitz

...