时间戳

首页 > 解决方案 > 在 html 和 angular 上带有画布的动态 id

html - 在 html 和 angular 上带有画布的动态 id

问题描述

我想在我的 html 中使用 angular 为我的报告（画布）设置一个动态 id，但如果你能帮助我，我会遇到错误，这是我的班级和我的 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 无法创建图表：无法从给定项目获取上下文”

标签： htmlangularcanvaschart.js

解决方案

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

确保您实现AfterViewInit和更新您的代码。

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

  ngAfterViewInit() {
    this.Grafico2();
  }

推荐阅读