如何实时更新我的 ChartJS（它仅在我放大和缩小时有效）

Question

我想要一个每次都在变化的图表，但是当我放大和缩小页面时它可以工作，但当我什么都不做时就不行。我的目标是有一个每 5 秒或实时变化的图表，但我不知道我应该怎么做，但我认为它不是很复杂，但我没有找到解决方案。

我的数据每 5 秒更新一次： [0,0,0,0,0,0,0,0,0,0] => [0,0,0,0,0,0,0,0,0,4.5643] => [0,0,0,0,0,0,0,0,4.5643,5.2161]等

有人知道一点吗？提前致谢！

这是我的 HTML 代码：

<div class="doubleTrp">
    <canvas baseChart
            [chartType]="chartType"
            [datasets]="[
                {
                    data: graphikAir, label: 'Consommation Air'
                }
             ]"
            [labels]="['-10', '-9', '-8', '-7', '-6', '-5', '-4', '-3', '-2', '-1']"
            [colors]="[{
              backgroundColor: ['rgb(130, 230, 0)'],
              hoverBackgroundColor: ['rgb(185, 30, 30)'],
              borderWidth: 1
            }]"
            [options]="{
              responsive: true
            }"
    </canvas>
</div>

这是我的 TS 代码：

import {Component, OnInit, OnDestroy} from '@angular/core';
import {ChartData, ChartType} from 'chart.js';
import { LineService } from '../services/line.service';
import {ActivatedRoute} from '@angular/router';
import {combineLatest, Subscription} from 'rxjs';
import {filter, map} from 'rxjs/operators';

@Component({
  selector: 'app-conso-graph',
  templateUrl: './conso-graph.component.html',
  styleUrls: ['./conso-graph.component.scss']
})
export class ConsoGraphComponent implements OnDestroy{

  lineSubscription: Subscription;
  lineSubscription2: Subscription;
  graphikAir: number[];
  graphikElec: number[];
  chartType: ChartType;
  chartData: any;

  constructor(private lineService: LineService,
              private route: ActivatedRoute) {
    this.chartIt();
  }

  _focusedData$ = combineLatest(
    this.lineService.lineSubject.pipe(filter(x => x.length > 0)),
    this.route.params.pipe(filter(x => !!x.id), map(x => x.id -1))
  ).pipe(
    map(([csvs, id]) => csvs[id])
  );

  gestionData(): void {
    this.lineSubscription = this._focusedData$.subscribe(x => this.graphikAir = x.graphAir);
    this.lineSubscription2 = this._focusedData$.subscribe(x => this.graphikElec = x.graphElec);
  }

  async chartIt() {
    await this.gestionData();

    this.chartType = 'line';

    this.chartData = [
      {
        data: this.graphikAir, label: 'Consommation Air'
      }
    ];
  }

  chartClicked(e: any): void { }
  chartHovered(e: any): void { }

  ngOnDestroy(): void {
    this.lineSubscription.unsubscribe();
    this.lineSubscription2.unsubscribe();
  }

}

Answer 1

我通过将 GraphikAir 放在 HTML 模板中找到了解决方案并且它有效！

如何实时更新我的 ChartJS（它仅在我放大和缩小时有效）

How can I update my ChartJS in real time (It's works only when I zoom-in and zoom-out)

observable

rxjs

typescript

chart.js

angular

如何实时更新我的​​ ChartJS（它仅在我放大和缩小时有效）

How can I update my ChartJS in real time (It's works only when I zoom-in and zoom-out)

observable

rxjs

typescript

chart.js

angular

如何实时更新我的 ChartJS（它仅在我放大和缩小时有效）