ng2-charts / chart.js - Как программно установить цвет кольцевой / круговой диаграммы на определенные метки?

Question

У меня есть список транзакций, которые возвращают status в качестве меток диаграммы и count в качестве данных диаграммы. Мои метки часто ['cancelled', 'completed', 'rejected'], но иногда данные возвращаются ['cancelled', 'completed', 'error', 'pending', 'rejected]. Как установить разные цвета для каждой этикетки?

Пока мой код:

statusCount: StatusCount[] = [];
  loaded = false;

  // Doughnut
  public chartData = [];
  public chartLabels = [];

  public chartType = 'doughnut';

  public chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    legend: {
      position: 'right'
   }
  };

  private chartColors: any[] = [{ backgroundColor: ['#E91E63', '#00BFA5', '#ff1744'] }];

  constructor(
    private apiService: ApiService
  ) { 
  }

  ngOnInit() {
    this.getTransactionStatus();
  }

  getTransactionStatus() {
    this.apiService.getTransactionStatus().subscribe((res: any) => {
      this.statusCount = res;
      for (const i of this.statusCount) {
        this.chartData.push(i.count);
        this.chartLabels.push(i.status);
      }
      this.loaded = true;
    }, error => {
      console.log(error);
    });
  }

Answer 1

Вы можете установить chartColors также в вашем методе getTransactionStatus.

Это будет выглядеть примерно так (при условии, что ваш statusCount объект имеет свойство цвета:

public chartColors: any[] = [{ backgroundColor: [] }];

  constructor(
    private apiService: ApiService
  ) { 
  }

  ngOnInit() {
    this.getTransactionStatus();
  }

  getTransactionStatus() {
    this.apiService.getTransactionStatus().subscribe((res: any) => {
      this.statusCount = res;
      for (const i of this.statusCount) {
        this.chartData.push(i.count);
        this.chartLabels.push(i.status);
        this.chartColors[0].backgroundColor.push(i.color);
      }
      this.loaded = true;
    }, error => {
      console.log(error);
    });
  }

Обратите внимание, что ваш chartColors объект должен быть общедоступным (например, chartData, chartLabelse и т. Д.), Чтобы быть видимым для HTML (он будет работать в режиме разработки, но не будет собираться, пока не станет общедоступным). .