ng2-charts / chart.js - 如何以编程方式在特定标签上设置 doughnut/pie 图表颜色？

Question

我有一个交易列表，return status 作为图表标签，count 作为图表数据。我的标签经常是['cancelled', 'completed', 'rejected']，但有时数据是return['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 对象有颜色属性:

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 对象应该 public（如 chartData、chartLabelse 等）才能对 HTML（它将在开发模式下工作，但除非它是 public.

，否则它不会构建

ng2-charts / chart.js - 如何以编程方式在特定标签上设置 doughnut/pie 图表颜色？

ng2-charts / chart.js - How to set doughnut/pie chart color on specific labels programatically?

angular

chart.js

ng2-charts