Как динамически выдвигать данные из огненной базы в гистограмму под углом - PullRequest
Новая
       34

Как динамически выдвигать данные из огненной базы в гистограмму под углом

0 голосов
/ 04 октября 2019

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>

output with console Я хочу показать количество типов вызовов (входящих, пропущенных, исходящих), данные на графике, проблемыэто не толкает в массиве barChartData []. Данные хранятся в FireStore, я могу получить их, а также отображается в консоли. Если я передаю статические данные, они идут идеально. Пока не идет динамика. Здесь они возвращают номер типа звонков. Если у кого-то есть идеи по этому поводу, помогите пожалуйста. Спасибо 

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'}
          ]
}
}

1 Ответ

0 голосов
/ 04 октября 2019

Вы должны создать переменную 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()

Cheers

...