Рендеринг компонента chart.js дважды на странице

Question

У меня есть компонент, который строит гистограмму с накоплением, которую мне нужно дважды вызвать на другой странице с другими данными.Хотя я пытаюсь это сделать, обе диаграммы визуализируются, но они перекрывают друг друга.

HTML-файл компонента диаграммы похож на

    <mat-card >
        <mat-card-header>
            <mat-card-title>
                <mat-icon class="iconText">developer_board</mat-icon>
                <b class="iconText">{{title}}</b>
            </mat-card-title>
        </mat-card-header>
        <mat-card-content class="ch">
               <canvas id="myChart" width="500" height="400"></canvas>
                <!-- <svg width="400" height="300"></svg> -->
        </mat-card-content>
    </mat-card>

, а мой файл component.ts -

var chartEle=(<HTMLCanvasElement>document.getElementById("myChart")).getContext("2d")
  this.chart = new Chart(chartEle, {
    type: 'bar',
    data: this.formatInputDataToChartData(), //function to generate dataset
    options: {
      scales: {
        xAxes: [{ stacked: true }],
        yAxes: [{ stacked: true }]
      }
    }
  });

Родительский компонент выглядит как

<div fxLayout="row"  fxLayoutGap="10px">
    <div fxFlex="50">
        <app-bar-chart [data]="appBarChartData" [title]="appChartTitle"></app-bar-chart>
    </div>
    <div fxFlex="50" >
        <app-bar-chart [data]="dbBarChartData"  [title]="dbChartTitle"></app-bar-chart>
    </div>
</div>

Заранее спасибо!

Answer 1

Не используйте:

var chartEle=(<HTMLCanvasElement>document.getElementById("myChart")).getContext("2d")

Просто определите холст в шаблоне вашего компонента и затем используйте @ViewChild, чтобы получить ссылку на него:

@Component({
  selector: 'app-bar-chart',
  template: `
    <div>
      <canvas style="width: 100%; height: 400px;" #canvas id="canvas"></canvas>
    </div>`,
})

@ViewChild('canvas') canvasRef: ElementRef;
this.ctx = this.canvasRef.nativeElement.getContext('2d');

this.chart = new Chart(this.ctx, {...