我已经在nodejs中建立了一个API，我使用HttpClient从我的nodejs应用程序中获取数据，所有的工作都很完美，数据都在那里，但是图表在angular组件中似乎并不像预期的那样工作。

我试图显示一个循环内的图表，理想情况下，将有3到4个图表在同一页，但不管我做什么，我似乎不能得到它的工作。

我所有的图表都显示为一个巨大的混乱图表。

这是我的代码:app.component.html

<div class="content" role="main">
  <div *ngIf="chart">
    <canvas id="canvas0" width="800" height="400">{{ chart }}</canvas>
  </div>

  <div *ngIf="chart">
    <canvas id="canvas1" width="800" height="400">{{ chart }}</canvas>
  </div>
  
  <div *ngIf="chart">
    <canvas id="canvas2" width="800" height="400">{{ chart }}</canvas>
  </div>
</div>

App.Component.ts

import { Component } from '@angular/core';
import { TMService } from './tm.service';
import { Chart } from 'chart.js';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  chart = []; 

  constructor(private _tm: TMService) {}

  ngOnInit() {
    this._tm.getData()
      .subscribe(res => {
        // a lot of data processing
        var i = 0;
        this.chart.push(new Chart('canvas'+i, {
          type: 'line',
          data: {
            labels: dates,
            datasets: points
          },
          options: {
            legend: {
              display: false
            },
            scales: {
              yAxes: [{
                id: 'cases',
                type: 'linear',
                position: 'left',
              }, {
                id: 'currency',
                type: 'linear',
                position: 'right',
                ticks: {
                  max: 100,
                  min: 0
                }
              }]
            }
          }
        }));

        i++;
      });

      console.log(this);

  }
}