Как обновлять данные в графике в реальном времени?

Question

[wjvcot]

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

ngOnInit() {
    this.loadReport()
  }

  private loadReport() {
    this.reportService.fetch(this.report_id).subscribe((data: Report[]) => {
      this.reports = data
    })
  }


  ngAfterViewInit() {
    const incomeConfig: any = {
      label: 'Income',
      backgroundColor: '#009688',
      borderColor: '#00796b'
    }

    const consumptionConfig: any = {
      label: 'Consumption',
      backgroundColor: '#0d47a1',
      borderColor: '#2196f3'
    }

    const dateConfig: any = {
      datasets: [ incomeConfig, consumptionConfig]
    }

    this.reportService.fetch(this.report_id).subscribe((data: Report[]) => {
      incomeConfig.data = data.map(item => item.income)
      consumptionConfig.data = data.map(item => item.consumption)
      dateConfig.labels = data.map(item => item.date)
      const reportCtx = this.reportRef.nativeElement.getContext('2d')

      new Chart(reportCtx, {
        type: 'bar',
        data: dateConfig,
        options: {
          scales: {
            xAxes: [{
                gridLines: {
                    offsetGridLines: true
                }
            }]
          } 
        }
      })
    })
  }

Answer 1

[0xD34F]

Делаете график свойством компонента:

chartObj: Chart;

this.chartObj = new Chart(reportCtx, ...

Соответственно, данные графика станут доступны как

this.chartObj.data.datasets

После внесения туда необходимых изменений обновляете график:

this.chartObj.update();

UPD. https://stackblitz.com/edit/angular-h83adp-chartjs...

Comments

[wjvcot]

Что-то не работает у меня. Это this.chartObj.update();же нужно добавить в функцию (например в onSubmit() ) так ведь?

[0xD34F]

Что-то не работает у меня.

Если "не работает" - это всё, что вы можете сообщить, нам с вами разговаривать не о чем.

Добавил в ответ демо. Смотрите, думайте.