使用 chartjs 和 firebase realtime db 创建实时折线图答案

【问题标题】：Creating a real time line chart using chartjs and firebase realtime db使用 chartjs 和 firebase realtime db 创建实时折线图
【发布时间】：2019-06-20 19:04:24
【问题描述】：

我正在使用带有 chart.js 库的 angular 7。我根据使用 angularfire2 库提取的 firebase 实时数据库中的数据创建了一个折线图。

数据显示每小时发送的消息数。这工作正常。但是，我想在数据更新时实时更新图表。

以下代码用于静态版本。请指教

 <div style="display: block;padding-top:30px">
                <canvas baseChart
                [chartType]="'line'"
                [datasets]="chartData"
                [colors]="colors"
                [labels]="chartLabels"
                [options]="chartOptions"
                [legend]="true">
                </canvas>
              </div>

对于.ts

@ViewChild(BaseChartDirective, null)
  public chart: BaseChartDirective;

 chartOptions = {
    responsive: true,
    legend: {
      display: true
   },
   scales: {
    yAxes: [{
        ticks: {
            beginAtZero: true
        }
    }]
    }
  };


  chartData = [
    { data: [], label: 'Messages/hour'
  }
  ];

  colors = []
  chartLabels = [];

async ngOnInit() {

    let resp = await this.dataSvc.fetchHourlyMessages(this.core.orgName)

    for(let key of Object.keys(resp)){
      this.chartData[0].data.push(resp[key].messages)
      let hour = resp[key].hour
      this.chartLabels.push(hour)
    }
    this.chart.chart.update()

  }

服务是：

fetchHourlyMessages(orgName:string){

    return new Promise((resolve, reject) =>
    {
      this.db.list(orgName + '/stats/messages/hourly/', ref => ref.orderByChild("messages").limitToLast(12)).valueChanges().subscribe(
        (res) => {
                    resolve(res)},
        (err) => { 
                    console.log("hitting error:" + err); reject(err)
                }
      )
   })

  }

数据如下所示

/stats
    /messages
       /hourly
         /1pm
           messages: 3
           hour: 1pm
         /2pm
           messages: 4
           hour: 2pm

【问题讨论】：

标签： angular typescript firebase-realtime-database chart.js angularfire2

【解决方案1】：

所以这里发生的是你只调用一次这个函数，因为你做了一个承诺。你需要做的是使用观察者。观察者将使用 firebase 的 valueChanges 选项返回套接字的值和更改后的值。为此，您必须更改您的服务：

fetchHourlyMessages(orgName:string){
  return this.db.list(orgName + '/stats/messages/hourly/', ref => ref.orderByChild("messages").limitToLast(12))
}

在你的 ngOnInit 上：

  this.dataSvc.fetchHourlyMessages(this.core.orgName).valueChanges().subscribe((resp: any) => {

    for(let key of Object.keys(resp)){
      this.chartData[0].data.push(resp[key].messages)
      let hour = resp[key].hour
      this.chartLabels.push(hour)
    }
    this.chart.chart.update()
  });

【讨论】：