Question

我将angular 7与chart.js库一起使用。我已经基于使用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

Answer 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()
  });

使用chartjs和firebase实时数据库创建实时折线图

1 个答案: