Angular 2 - "Ich kann die Eigenschaft 'getContext' von null nicht lesen Fehler bei der Verwendung von HTML Canvas

Question

Ich versuche, ein Donut-Diagramm anzuzeigen, das mit HTML5 Canvas erstellt wurde. Ich erhalte eine Fehlermeldung, die besagt, dass Cannot read property 'getContext' of null, die ich weiß, erhalten wird, weil mein JS-Code geladen wird, bevor der HTML-Code geladen wird.

Wie löse ich dieses Problem in Angular2?

Arbeitscode (immer Fehler): http://plnkr.co/edit/hYlFp1BX8ebixQMqAtNj?p=preview

Working Donut Chart in Html: https://jsfiddle.net/nvarun123/yn1bhj2a/4/

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 

 
var colors=['green','orange']; 
 
var values=[47,53]; 
 
var labels=['Completed','Pending']; 
 

 
dmbChart(125,125,100,25,values,colors,labels,0); 
 

 
function dmbChart(cx,cy,radius,arcwidth,values,colors,labels,selectedValue){ 
 
    var tot=0; 
 
    var accum=0; 
 
    var PI=Math.PI; 
 
    var PI2=PI*2; 
 
    var offset=-PI/2; 
 
    ctx.lineWidth=arcwidth; 
 
    for(var i=0;i<values.length;i++){tot+=values[i];} 
 
    for(var i=0;i<values.length;i++){ 
 
     ctx.beginPath(); 
 
     ctx.arc(cx,cy,radius, 
 
      offset+PI2*(accum/tot), 
 
      offset+PI2*((accum+values[i])/tot) 
 
     ); 
 
     ctx.strokeStyle=colors[i]; 
 
     ctx.stroke(); 
 
     accum+=values[i]; 
 
    } 
 
    var innerRadius=79; 
 
    ctx.beginPath(); 
 
    ctx.arc(cx,cy,innerRadius,0,PI2); 
 
    ctx.fillStyle=colors[selectedValue]; 
 
    ctx.fill(); 
 
    ctx.textAlign='center'; 
 
    ctx.textBaseline='bottom'; 
 
    ctx.fillStyle='white'; 
 
    ctx.font=(60)+'px verdana'; 
 
    ctx.fillText(values[selectedValue],cx,cy+innerRadius*.7); 
 
    ctx.font=(20)+'px verdana'; 
 
    ctx.fillText(labels[selectedValue],cx,cy-innerRadius*.25); 
 
}

<canvas id="canvas" class="cont" width=250 height=250></canvas>

Wenn es einen Weg gibt, es zu lösen mir bitte sagen.

Answer 1

Versuchen Sie, Ihre Leinwand zu erklären, wie folgt:

var ctx: CanvasRenderingContext2D = this.childComponent.nativeElement.getContext("2d"); 

Ihre Komponente wird:

@Component({ 
    selector: 'canvas-component', 
    template: `<canvas #childComponent></canvas>`, 
}) 
export class ParentComponent{ 
    ... 
    @ViewChild childComponent: ElementRef; 
    ... 
} 

Mehr Details hier: https://stackoverflow.com/a/36164708/1267942

Answer 2

Es funktioniert, nachdem ich den Code in das setzen Klasse in ngAfterViewInit() {}

import {Component} from '@angular/core'; 
@Component({ 
    selector:'test-component', 
    styleUrls: ['./test.component.css'], 
    templateUrl: './test.component.html' 

}) 
export class TestComponent{ 


    ngAfterViewInit() { 
    var canvas=document.getElementById("canvas"); 
var ctx=canvas.getContext("2d"); 

var colors=['green','orange']; 
var values=[47,53]; 
var labels=['Completed','Pending']; 

dmbChart(125,125,100,25,values,colors,labels,0); 

function dmbChart(cx,cy,radius,arcwidth,values,colors,labels,selectedValue){ 
    var tot=0; 
    var accum=0; 
    var PI=Math.PI; 
    var PI2=PI*2; 
    var offset=-PI/2; 
    ctx.lineWidth=arcwidth; 
    for(var i=0;i<values.length;i++){tot+=values[i];} 
    for(var i=0;i<values.length;i++){ 
     ctx.beginPath(); 
     ctx.arc(cx,cy,radius, 
      offset+PI2*(accum/tot), 
      offset+PI2*((accum+values[i])/tot) 
     ); 
     ctx.strokeStyle=colors[i]; 
     ctx.stroke(); 
     accum+=values[i]; 
    } 
    var innerRadius=79; 
    ctx.beginPath(); 
    ctx.arc(cx,cy,innerRadius,0,PI2); 
    ctx.fillStyle=colors[selectedValue]; 
    ctx.fill(); 
    ctx.textAlign='center'; 
    ctx.textBaseline='bottom'; 
    ctx.fillStyle='#FFF'; 
    ctx.font=(60)+'px sans-serif'; 
    ctx.fillText(values[selectedValue],cx,cy+innerRadius*.7); 
    ctx.font=(20)+'px sans-serif'; 
    ctx.fillText(labels[selectedValue],cx,cy-innerRadius*.25); 
} 
     } 

}