在接收数据之前显示图表 - ChartJs - 每秒刷新一次

Question

我尝试在我的网站中显示一个包含 csv 文件数据的圆环图。但问题是，当我重新加载页面时，没有数据也没有甜甜圈，但是当我转到另一个页面（没有相同的路径）并且我回到正确的页面时，甜甜圈出现了，但我有一个错误： "ng-charts 配置错误，需要 data 或 datasets 字段才能渲染未定义的图表。"

另外，像数据每秒都在变化，如何每次刷新图表？

非常感谢，我尝试了在 google 的 4 个第一页上找到的所有内容，但没有...

HTML 代码：

<div class="doubleTrp" *ngIf="_focusedData$ | async">
  <div class="trpChart">
    <canvas baseChart
            [chartType]="chartType"
            [datasets]="chartDatasets"
            [labels]="chartLabels"
            [colors]="chartColors"
            [options]="chartOptions"
            [legend]="true"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)">
    </canvas>
  </div>
</div>

我的 TS 文件：

import {Component, OnInit, OnDestroy} from '@angular/core';
import { ChartType } from 'chart.js';
import { MultiDataSet, Label} from 'ng2-charts';
import { LineService } from '../services/line.service';
import {ActivatedRoute} from '@angular/router';
import { SingleLineComponent } from '../single-line/single-line.component';
import {combineLatest, Subscription} from 'rxjs';
import {filter, map} from 'rxjs/operators';

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

  lineSubscription: Subscription;
  trpHorraire: number;
  trpPoste: number;
  chartType: ChartType;
  chartDatasets: Array<any>
  chartLabels: Array<any>;
  chartColors: Array<any>;
  chartOptions: any;

  constructor(private lineService: LineService,
              private route: ActivatedRoute) {
  }

  ngOnInit(): void {
    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.trpHorraire = x.trpHeureReel);
    this.lineSubscription = this._focusedData$.subscribe(x => this.trpPoste = x.trpPosteReel);
  }

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

    this.chartType = 'doughnut';
    this.chartDatasets = [
      {data: [this.trpHorraire, 100 - this.trpHorraire], label: 'TrpHorraire'}
    ];
    this.chartLabels = ['TRP HORRAIRE'];
    this.chartColors = [
      {
        backgroundColor: ['rgb(0, 133, 86)', 'rgb(78, 107, 124)'],
        hoverBackgroundColor: ['rgb(30, 163, 116)', 'rgb(108, 137, 144)'],
        borderWidth: 2,
      }
    ];
    this.chartOptions = {
      responsive: true
    };
  }

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

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

}

因此，通过更改页面，数据会显示出来，但不会在第一次加载时显示在正确的页面上。

任何帮助都是有用的， 非常感谢。

Answer 1

我解决了我的问题，只是在 html 代码中而不是在 ts 中编写变量。 我希望它会有所帮助。

查看代码：

  <ng-template class="trpChart" #vertH>
    <canvas baseChart
            [chartType]="chartType"
            [datasets]="[
              {
              data: [this.trpHoraire, 100 - this.trpHoraire], label: 'TrpHoraire'
              }
            ]"
            [colors]="[{
              backgroundColor: ['rgb(130, 230, 0)', 'rgb(255, 255, 255)'],
              hoverBackgroundColor: ['rgb(185, 30, 30)', 'rgb(225, 225, 255)'],
              borderWidth: 1
            }]"
            [options]="{
              responsive: true,
              cutoutPercentage: 80,
              title : {
                display: true,
                text: 'TRP HORAIRE',
                fontSize: 25
              }
            }"
            [legend]="true"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)">
    </canvas>
  </ng-template>

对于 TS，是这样的：

import {Component, OnInit, OnDestroy} from '@angular/core';
import { ChartType } from 'chart.js';
import { MultiDataSet, Label} from 'ng2-charts';
import { LineService } from '../services/line.service';
import {ActivatedRoute} from '@angular/router';
import { SingleLineComponent } from '../single-line/single-line.component';
import {combineLatest, Subscription} from 'rxjs';
import {filter, map} from 'rxjs/operators';

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

  lineSubscription: Subscription;
  lineSubscription2: Subscription;
  trpHoraire: number;
  trpPoste: number;
  chartType: ChartType;
  chartDatasets: Array<any> = [];
  chartColors: Array<any>;
  chartOptions: 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.trpHoraire = x.trpHeureReel);
    this.lineSubscription2 = this._focusedData$.subscribe(x => this.trpPoste = x.trpPosteReel);
  }

  gestionColor() {
    if(this.trpHoraire < 50) {
      return 'rgb(225, 37, 27)';
    }
    else if(this.trpHoraire >= 50 && this.trpHoraire < 80) {
      return 'rgb(255, 182, 0)';
    }
    else {
      return 'rgb(130, 230, 0)';
    }
  }

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

    this.chartType = 'doughnut';
    /*this.chartDatasets = [
      {data: [this.trpHorraire, 100 - this.trpHorraire], label: 'TrpHorraire'}
    ];*/
    //this.chartLabels = ['TRP HORRAIRE'];
    this.chartColors = [
      {
        backgroundColor: ['rgb(130, 230, 0)', 'rgb(255, 255, 255)'],
        hoverBackgroundColor: ['rgb(30, 163, 116)', 'rgb(225, 225, 255)'],
        borderWidth: 1,
      }
    ];
    this.chartOptions = {
      responsive: true,
      cutoutPercentage: 80,
      title : {
        display: true,
        text: 'test'
      }
    };
  }

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

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

}