如何在angular中从Json文件中获取图表(条形图/饼形图等)中的数据？

{
  "chartData": [
    { "label": "A", "value": 10 },
    { "label": "B", "value": 20 },
    { "label": "C", "value": 15 },
    { "label": "D", "value": 25 }
  ]
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ChartService {
  private dataUrl = 'assets/data.json'; // JSON文件的路径

  constructor(private http: HttpClient) { }

  getChartData(): Observable<any> {
    return this.http.get<any>(this.dataUrl);
  }
}

import { Component, OnInit } from '@angular/core';
import { ChartService } from './chart.service';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit {
  chartData: any[];

  constructor(private chartService: ChartService) { }

  ngOnInit(): void {
    this.chartService.getChartData().subscribe(data => {
      this.chartData = data.chartData;
      // 在这里可以使用获取到的数据进行图表的渲染
    });
  }
}

<mat-card>
  <mat-card-content>
    <div *ngIf="chartData">
      <div *ngFor="let item of chartData">
        <div>{{ item.label }}</div>
        <div>
          <div [style.width.%]="item.value">{{ item.value }}</div>
        </div>
      </div>
    </div>
  </mat-card-content>
</mat-card>