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

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

它看起来像这样（假设您的statusCount对象具有color属性：

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可见（它可以在开发模式下工作，但除非是公共的，否则它不会生成。