Создание графика в реальном времени с использованием chartjs и firebase в реальном времени - PullRequest
Новая
       27

Создание графика в реальном времени с использованием chartjs и firebase в реальном времени

0 голосов
/ 20 июня 2019

Я использую Angular 7 с библиотекой chart.js.Я создал линейную диаграмму на основе данных из базы данных Firebase в реальном времени, извлеченных с использованием библиотеки angularfire2.

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

приведенный ниже код предназначен для статической версии.Пожалуйста, посоветуйте 

 <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

1 Ответ

2 голосов
/ 20 июня 2019

Итак, что здесь происходит, вы вызываете эту функцию только один раз, потому что дали обещание. Что вам нужно сделать, это использовать наблюдателя. Наблюдатель вернет значение и измененное значение сокета с опцией valueChanges в firebase. Для этого вам нужно изменить свои услуги: 

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