首页 > 解决方案 > Angular 与 Chart.js,不显示数据

问题描述

我在 Angular 组件中显示来自 API 的数据时遇到了一些问题,我不知道出了什么问题,我不知道是我创建图表的方式还是我的方式我正在检索来自 API 的数据,如果你能帮助我,我将非常感激

这是TS代码:

  disk: Observable<any>;

  free: any;
  total: any;
  available: any;

  constructor(private http: HttpClient, private convertService: ConvertService) {

    this.disk = this.getDiskInfo();
    this.disk.subscribe(data => {
      this.free = this.convertService.formatBytes(data.free);
      this.available = this.convertService.formatBytes(data.available);
      this.total = this.convertService.formatBytes(data.total);
    });

  }

  ngOnInit(): void {
    var myChart = new Chart('diskChart', {
      type: 'bar',
      data: {
          labels: ['Red', 'Blue', 'Green'],
          datasets: [{
              label: '# of Votes',
              data: [this.total, this.available, this.free],
              backgroundColor: [
                  'rgba(255, 99, 132)',
                  'rgba(54, 162, 235)',
                  'rgba(75, 192, 192)'
              ]
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true
                  }
              }]
          }
      }
  });
  }

  getDiskInfo() {
    return this.http.get(this.BASE_URL);
  }

标签: angulartypescriptapicharts

解决方案


推荐阅读