Получать данные в реальном времени из Firebase и отображать на графике в Ionic - PullRequest
Новая
       20

Получать данные в реальном времени из Firebase и отображать на графике в Ionic

0 голосов
/ 16 января 2019

Итак, я пытаюсь сделать диаграмму в ионном режиме, получая данные из базы данных.Я использую chart.js, но я не могу понять это правильно.Мне нужны живые данные, так что это главная проблема.В Интернете я нашел помощь, которая создавала графики с использованием статических данных, но это мне не помогло, потому что я работаю с живыми данными и хочу показывать их в режиме реального времени.

Кто-нибудь может мне помочь?

Так выглядят мои данные из базы данных, и я хочу построить линейный график, используя угол и время.

Firebase-изображение моих данных как сохраненных 

    public lineChartData:Array<any> = [
        {data: [65, 59, 80, 81, 56, 55, 60], label: 'Series A'},
      ];
      public lineChartLabels:Array<any> = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'];
      public lineChartOptions:any = {
        responsive: true
      };

      public lineChartColors: Array<any> = [
        { // grey
          backgroundColor: 'rgba(148,159,177,0.2)',
          borderColor: 'rgb(255,255,255)',
          pointBackgroundColor: 'rgba(148,159,177,1)',
          pointBorderColor: '#fff',
          pointHoverBackgroundColor: '#fff',
          pointHoverBorderColor: 'rgba(148,159,177,0.8)'
        },
        { // dark grey
          backgroundColor: 'rgba(77,83,96,0.2)',
          borderColor: 'rgb(255,255,255)',
          pointBackgroundColor: 'rgba(77,83,96,1)',
          pointBorderColor: '#fff',
          pointHoverBackgroundColor: '#fff',
          pointHoverBorderColor: 'rgba(77,83,96,1)'
        },
        { // grey
          backgroundColor: 'rgba(148,159,177,0.2)',
          borderColor: 'rgb(255,255,255)',
          pointBackgroundColor: 'rgba(148,159,177,1)',
          pointBorderColor: '#fff',
          pointHoverBackgroundColor: '#fff',
          pointHoverBorderColor: 'rgba(148,159,177,0.8)'
        }
      ];
      public lineChartLegend: boolean = true;
      public lineChartType: string = 'line';

.... и некоторые из них в том же файле.файл ts 

 public randomize(): void {
    let _lineChartData: Array<any> = new Array(this.lineChartData.length);
    for (let i = 0; i < this.lineChartData.length; i++) {
      _lineChartData[i] = {data: new Array(this.lineChartData[i].data.length), label: this.lineChartData[i].label};
      for (let j = 0; j < this.lineChartData[i].data.length; j++) {
        _lineChartData[i].data[j] = Math.floor((Math.random() * 100) + 1);
      }
    }
    this.lineChartData = _lineChartData;
  }
// events
  public chartClicked(e: any): void {
    // console.log(e);
  }

  public chartHovered(e: any): void {
    // console.log(e);
  }
  private updateCharts(result: any[]) {
  }

  private createCharts(result: any[]) {

  }
}
...