使用ngx-pie-charts在angular中填充来自API的图表数据

npm install ngx-pie-charts --save

import { NgxPieChartModule } from 'ngx-pie-charts';

@NgModule({
  imports: [
    NgxPieChartModule
  ]
})
export class YourModule { }

import { Component } from '@angular/core';

@Component({
  selector: 'your-component',
  template: `
    <ngx-pie-chart [data]="chartData"></ngx-pie-chart>
  `
})
export class YourComponent {
  chartData: any[];

  // 从API获取数据的方法
  getDataFromAPI() {
    // 通过API获取数据
    // 将数据赋值给chartData变量
    this.chartData = [
      { label: '数据1', value: 25 },
      { label: '数据2', value: 35 },
      { label: '数据3', value: 40 }
    ];
  }
}

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'your-component',
  template: `
    <ngx-pie-chart [data]="chartData"></ngx-pie-chart>
  `
})
export class YourComponent implements OnInit {
  chartData: any[];

  ngOnInit() {
    this.getDataFromAPI();
  }

  getDataFromAPI() {
    // 获取数据的逻辑
  }
}