Tengo un problema al cargar gráficos en angular 11. El gráfico no se muestra cuando se carga la página, pero se muestra cuando hacemos clic en alguna etiqueta "recuento de estudiantes". Usé lienzo en la página html para mostrar el gráfico.
Estoy usando chart.js versión 2.9.4
<div style="height:250px;"> <canvas id="myChart" width="750" height="250" #mychart> </canvas> </div>mi código en el archivo mecanografiado se parece a esto
import { Chart } from 'chart.js'; canvas: any; ctx: any; @ViewChild('mychart') mychart:any; ngAfterViewInit() { this.canvas = this.mychart.nativeElement; this.ctx = this.canvas.getContext('2d'); new Chart(this.ctx, { type: 'line', data: { datasets: [{ label: 'Students Count', data: this.row_studnet,//this values received from the backend backgroundColor: "rgb(115 185 243 / 65%)", borderColor: "red", fill: true, }, ], labels: this.row_feeid//this values received from the backend }, });No entiendo el problema real. Por favor, ayúdenme a resolver este problema.
Es porque se llama a ngAfterViewInit después de que se completa la detección de cambios y la vista ya se ha creado. Cuando hace clic en la misma etiqueta, ejecuta un nuevo ciclo de detección de cambios.
Puede intentar agregar esta línea de código después de new Chart(), donde cd es ChangeDetectorRef inyectado en el constructor.
setTimeout(() => { this.cd.markForCheck(); });que marcará este componente como sucio para la detección de cambios.