在饼图中异步显示来自 chart.js 和 typescript 的数据

Question

I have the following setup in my Angular project:

HTML

<canvas baseChart 
[data]="pieChartData" 
[labels]="pieChartLabels" 
[colors]="pieChartColours" 
[chartType]="pieChartType">
</canvas>

TS

export class ValidationResultComponent implements OnInit {  
...
Success
Allowed
Failed
pieChartLabels:string[] = ['Success', 'Allowed', 'Failed'];
pieChartData:number[] = [this.Success, this.Allowed, this.Failed];
pieChartType:string = 'pie';
pieChartColours:any[] = [{ backgroundColor: ["#bff0aa","#f2e69d", "#e0a2a2"] }]

constructor(
    private notificationService: NotificationService,
    private codeValidationService: CodevalidationService,
    private router: Router,
    private route: ActivatedRoute) { }

ngOnInit() {
    let that = this;

    this.dtOptions[0] = {
      ...
      ajax: (dataTablesParameters: any, callback) => {
        that.codeValidationService.getCodeValidationResults('id')
          .subscribe(
          (responses) => {
            var logDetails = responses['results'][0]['stats'].map( stats => {
              if(stats.action === "# Successful services"){
                this.Success = stats.times
              }
              if(stats.action === "# Failed services"){
                this.Failed = stats.times
              }
              if(stats.action === "# Allowed Exceptions"){
                this.Allowed = stats.times
              }
              return {
                'name': this.checkNull(stats.action),
                'status': this.checkNull(stats.times),
              }
            })
            callback({
              data: logDetails
            })
          })
      }
    };
    ...
}

With this setup, there will not be data shown in my pieChart because I assign the data to the variables from an API call in ngOninit(). Has anyone got an idea how I can solve this?

Answer 1

Try using ngOnChanges() to listen to the data change and update your variables accordingly.