在 html 和 angular 上使用 canvas 的动态 ID

Question

我想在我的 html 和 angular 中为我的报告 (canvas) 设置一个动态 ID，但是如果你能帮助我，我会收到一个错误，这是我的 class 和 html

的代码

export class CardKPIReporteComponent implements OnInit {
  @BlockUI() blockUI: NgBlockUI;
  @Input() datos_kpi_reporte: any
  fetcher: any
  arrayListaKpis: any
  tituloreporte: any
  id: any = 1
  chartBienesUbicacion: any;
  constructor(private procesoOperacionService: ProcesoOperacionesService
  ) {

  }

  ngOnInit() {
    this.tituloreporte = this.datos_kpi_reporte.servicio_nombre
    this.id = this.datos_kpi_reporte.cont //this.id = 1
    this.Grafico2();

  }
  Grafico2() {
    // this.id = this.datos_kpi_reporte.cont

    var nombrechart = "Reporte" + this.datos_kpi_reporte.cont
    this.chartBienesUbicacion = new Chart(nombrechart, {
      type: 'pie',
      data: {
        labels: ['ENTREGADO', 'NO ENTREGADO', '1', '1'],
        datasets: [
          {
            label: 'Cantidad',
            data: ['1', '1', '1', '1'], // this.chartsTotal,
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor:
              'rgba(54, 162, 235, 1)',
            borderWidth: 1
          }
        ]
      },
      options: {
        title: {
          text: nombrechart,
          display: true
        },
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true
              }
            }
          ]
        }
      }
    });
  }
}

    <mat-card-content>
        <!--<app-alert></app-alert> -->
        <div class="row">
            <canvas id="Reporte{{ this.id }}"></canvas>
        </div>
    </mat-card-content>

我一直在尝试这种方式，但我收到此错误：“Chart.js:8459 无法创建图表：无法从给定项目获取上下文”

Answer 1

发生这种情况是因为您在模板中设置 ID 之前尝试添加 canvas。您需要在模板中设置 ID，并在视图初始化后添加您的图表。

确保你实施 AfterViewInit 并更新你的代码。

  ngOnInit() {
    this.tituloreporte = this.datos_kpi_reporte.servicio_nombre
    this.id = this.datos_kpi_reporte.cont
  }

  ngAfterViewInit() {
    this.Grafico2();
  }

在 html 和 angular 上使用 canvas 的动态 ID

Dynamic id with canvas on html and angular

html

canvas

chart.js

angular