使用Angular在表格单元格内的chartjs图

Question

我试图在Angular Material表单元格中显示chartjs图形。但是当我做所有事情时，它破坏了代码。

对于我代码中的其他html元素来说，同样可以正常工作，但是当我尝试在表中实现它时，它就会中断。

我的模板代码：

<ng-container matColumnDef="success">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Success
    </mat-header-cell>
    <!-- <mat-cell *matCellDef="let element">
        {{ ( (element.task.totalTestCompleted ) /
        (element.task.totalTestCompleted +
        element.task.failedTests) ) | percent}}
    </mat-cell> -->
    <mat-cell>
    <div *ngIf="byCatagory">
        <canvas id="canvas1">{{ byCatagory }}</canvas>
    </div>
</mat-cell>
</ng-container>

.ts文件中的我的图形代码

//Graph 1 Start
    this.byCatagory = new Chart('canvas1', {
      type: 'doughnut',
      data: {
        labels: ["% Used", "% Remaining"],
        datasets: [
          {
            data: [75, 25],
            backgroundColor: this.config.backgroundColor
          }
        ]
      },
      options: {
        responsive: true,
        cutoutPercentage: 65,
        legend: {
          display: false,
          position: 'left'
        },
        animation: {
          duration: 1000,
          animateScale: true,
          easing: 'linear'
        }
      }
    });

如何在表格单元格中显示图形？我想在表格单元格中显示成功百分比图。