Question

因此，我试图通过从Firebase中获取数据来制作离子图。我正在使用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[]) {

  }
}

从Firebase提取实时数据并在Ionic中显示在图表中

0 个答案: