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

Question

Html 文件：

<div>
<div class = "container" >
  <div style="display: block" >
    <canvas baseChart 
    [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)">

    </canvas>
  </div>

我想显示有多少类型的呼叫（传入、未接、传出）的计数，图表上的数据，问题是它没有推入 barChartData[] 数组。数据存储在 firestore 中，我可以检索它，它也显示在控制台中。如果我传递静态数据，它会出现 perfect.While 动态不会出现。他们在这里 return 拨打电话的类型。如果有人对此有一些想法，请提供帮助。谢谢

import { Component, OnInit} from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/observable';

export interface Post {
  callType: string;
  ...
}
@Component({
  selector: 'app-screen2',
  templateUrl: './screen2.component.html',
  styleUrls: ['./screen2.component.scss'],
})

export class Screen2Component implements OnInit {
postsCol: AngularFirestoreCollection<Post>;
posts: Observable<Post[]>;

 public barChartOptions: any = {
   scaleShowVerticalLines: false,
    responsive: true,
  };

  public barChartLabels  = [ "incoming" , "missed" , "outgoing"];
  public barChartType  = 'bar';
  public barChartLegend = true;
  inco: any ;
  miss: any ;
  outg: any ;
    ab: any;
    bc: any;

  public barChartData: any[] = [
  {data: [], label: 'calls'}
];
isDataAvailable: boolean = false;

public chartClicked(e: any): void {
  console.log(e);
}

public chartHovered(e: any): void {
  console.log(e);
}
constructor(private db: AngularFirestore) {}
  ngOnInit() {

    let i;
    this.postsCol = this.db.collection<Post>('ana', ref => ref.orderBy('callType'));
    this.postsCol.valueChanges().subscribe(daa => {

for(i=0; i <= daa.length; i++) {
           this.ab = (daa[i].callType);
           if(this.ab == 'INCOMING'){
             this.inco = this.ab;
             console.log(this.inco)
          }
           if(this.ab == 'OUTGOING'){
             this.outg = this.ab
             console.log(this.outg)
           }
           if(this.ab == 'MISSED'){
            this.miss = this.ab
            console.log(this.miss)
       }

this.barChartData = [
            { data: [this.inco, this.miss, this.outg], label: 'calls'}
          ]
}
}

Answer 1

您必须像这样创建一个 config 变量：

public config = {
    type: 'bar',
    legend: true,
    data: {
      labels: [ "incoming" , "missed" , "outgoing"],
      datasets: [{
        label: 'calls',
        data: []
      }]
    }
  }

在您的 html 文件中，输入：

<div style="display: block">
   <canvas id="canvas" style="display: block"></canvas>
</div>

在 ngOnInit() 函数中执行此操作（变量 ctx 和 myBarChart 必须提前定义）：

this.ctx = document.getElementById('canvas') as HTMLCanvasElement
this.myBarChart = new Chart(this.ctx.getContext('2d'), this.config)

当你想更新数据时，你可以这样做：

this.myBarChart.data.datasets[0].data = your_firebase_data;
this.myBarChart.update()

干杯

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

How to Push data dynamically from firebase to bar graph in angular

angular

google-cloud-firestore

chart.js

ng2-charts