从chart.JS中以角度6的单个组件加载多个甜甜圈图

Question

我有一个组件，其中我必须显示2个甜甜圈图。然后我有另一个组件，它将从上一个组件获取数据集后加载图表。在传递不同的数据和不同的ID之后，没有一个图表被加载。

这是我的代码：-父组件HTML：-

<div class="card chart radial-chart match-time col-sm-3">
        <label class="card-title">Match Time</label>
        <app-chart-component [data]='matchingChartData' [id]=1></app-chart-component>
    </div>
    <div class="card chart radial-chart passage-time col-sm-3">
        <label class="card-title">Passage Time</label>
        <app-chart-component [data]='PassagerChartData' [id]=2></app-chart-component>
    </div>

父项ts：-

matchingChartData = {
labels : ['Minimum','Maximum', 'Average'],
datasets: [
  { 
    data: [2.4,2.8, 5],
    backgroundColor: ['blue','red','green' ]
  },
]

};

 PassageChartData = {
labels : ['Minimum','Maximum', 'Average'],
datasets: [
  { 
    data: [2.4,2.8, 2.6],
    backgroundColor: ['green','red','yellow' ]
  },
]

}

图表组件HTML：-

<canvas id={{uniqueId}}></canvas>

图表组成部分ts：-

import { Component, OnInit, Input } from '@angular/core';
import { Chart } from 'chart.js';

@Component({
  selector: 'app-chart-component',
    templateUrl: './chart-component.component.html',
    styleUrls: ['./chart-component.component.css']
  })
  export class ChartComponentComponent implements OnInit {
    chart: any;
    uniqueId: any;
    @Input() data: any;
    @Input() id:number;
    constructor() { }

    ngOnInit() {
      this.uniqueId = 'canvas'+this.id;;
      this.chart = new Chart('canvas', {
        type: 'doughnut',
        data: {
          labels: this.data.labels,
          datasets: this.data.datasets
        },
        options: {
          cutoutPercentage: 85,
          rotation: 1 * Math.PI,
          circumference: 1 * Math.PI,
          legend: {
            display: false,
          },
          tooltips:{
            enabled:true,
            titleFontSize: 26,
            bodyFontSize: 26
          }
              }
      });
    }

  }

Answer 1

图表组件HTML：-

<canvas id="{{uniqueId}}"></canvas>

或

<canvas [id]="uniqueId"></canvas>

Answer 2

图表组成部分ts：

import { Component, OnInit, Input,ViewChild,AfterViewInit } from '@angular/core';
import { Chart } from 'chart.js';
@Component({
  selector: 'app-chart-component',
    templateUrl: './chart-component.component.html',
    styleUrls: ['./chart-component.component.css']
  })
  export class ChartComponentComponent implements OnInit, AfterViewInit {
    chart: any;
    uniqueId: any;
    @Input() data: any;
    @Input() id:number;
    @ViewChild('canvas', { static: false }) canvas: ElementRef;
    constructor() { }

    ngOnInit() {}

    ngAfterViewInit() {
      this.uniqueId = 'canvas'+this.id;;
      this.chart = new Chart(this.canvas, {
        type: 'doughnut',
        data: {
          labels: this.data.labels,
          datasets: this.data.datasets
        },
        options: {
          cutoutPercentage: 85,
          rotation: 1 * Math.PI,
          circumference: 1 * Math.PI,
          legend: {
            display: false,
          },
          tooltips:{
            enabled:true,
            titleFontSize: 26,
            bodyFontSize: 26
          }
              }
      });
    }

  }

图表组件HTML：

<canvas #canvas [id]="uniqueId"></canvas>