Блог

Я хочу иметь график с изменением каждый раз, но он работает, когда я увеличиваю и уменьшаю масштаб страницы, но не тогда, когда я ничего не делаю. Моя цель — иметь график, который меняется каждые 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();
  }

}
 

Я нахожу решение, помещая GraphikAir в шаблоны HTML, и это работает!