#html #angular #canvas #chart.js
Вопрос:
я хочу установить динамический идентификатор для моего отчета (холста) в моем html с помощью angular, но я получаю сообщение об ошибке, если вы можете мне помочь, пожалуйста, это код моего класса и мой 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 } } ] } } }); } } lt;mat-card-contentgt; lt;!--lt;app-alertgt;lt;/app-alertgt; --gt; lt;div class="row"gt; lt;canvas id="Reporte{{ this.id }}"gt;lt;/canvasgt; lt;/divgt; lt;/mat-card-contentgt; я пытался сделать это, но я получаю эту ошибку: «Chart.js:8459 Не удалось создать диаграмму: не удается получить контекст из данного элемента»
Комментарии:
1. Ваш идентификатор холста, похоже, имеет пробел в конце, из-за этого он испортится, если вы удалите его, чтобы он соответствовал и, следовательно, работал нормально
Ответ №1:
Это происходит потому, что вы пытаетесь добавить холст до того, как установите идентификатор в шаблоне. Вам нужно установить идентификатор в шаблоне и после инициализации представления добавить свою диаграмму.
убедитесь, что вы реализуете AfterViewInit и обновляете свой код как таковой.
ngOnInit() { this.tituloreporte = this.datos_kpi_reporte.servicio_nombre this.id = this.datos_kpi_reporte.cont } ngAfterViewInit() { this.Grafico2(); }