如何在angular中动态地将数据从firebase推送到条形图

import { Component } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';

@Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html',
  styleUrls: ['./bar-chart.component.css']
})
export class BarChartComponent {
  constructor(private db: AngularFireDatabase) { }
}

export class BarChartComponent {
  data: any[];

  constructor(private db: AngularFireDatabase) {
    this.db.list('data').valueChanges().subscribe((data: any[]) => {
      this.data = data;
      // 在数据变化时更新条形图
      this.updateBarChart();
    });
  }

  updateBarChart() {
    // 根据新的数据更新条形图的逻辑
  }
}

<div>
  <canvas id="barChart"></canvas>
</div>

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import { Chart } from 'chart.js';

export class BarChartComponent implements AfterViewInit {
  @ViewChild('barChart') barChart: ElementRef;

  ngAfterViewInit() {
    const ctx = this.barChart.nativeElement.getContext('2d');
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: this.data.map(item => item.label),
        datasets: [{
          label: 'Data',
          data: this.data.map(item => item.value),
          backgroundColor: 'rgba(75, 192, 192, 0.2)',
          borderColor: 'rgba(75, 192, 192, 1)',
          borderWidth: 1
        }]
      },
      options: {
        // 配置项
      }
    });
  }
}