ng2-charts / chart.js - 如何以编程方式在特定标签上设置甜甜圈/饼图颜色？答案

【问题标题】：ng2-charts / chart.js - How to set doughnut/pie chart color on specific labels programatically?ng2-charts / chart.js - 如何以编程方式在特定标签上设置甜甜圈/饼图颜色？
【发布时间】：2018-06-29 15:33:35
【问题描述】：

我有一个交易列表，这些交易返回 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);
    });
  }

【问题讨论】：

标签： angular chart.js ng2-charts

【解决方案1】：

您也可以在您的getTransactionStatus 方法中设置chartColors。

它看起来像这样（假设您的 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 可见（它将在开发模式下工作，但除非它是公共的，否则不会构建.

【讨论】：