Angular 2 - 使用HTML Canvas時出現「無法讀取屬性'getContext'null」錯誤

我試圖顯示使用HTML5 Canvas製作的圓環圖。我收到一個錯誤，說Cannot read property 'getContext' of null，我知道這是因爲我的JS代碼在加載HTML之前加載的。Angular 2 - 使用HTML Canvas時出現「無法讀取屬性'getContext'null」錯誤

如何在Angular2中解決這個問題？

工作守則（收到錯誤）：http://plnkr.co/edit/hYlFp1BX8ebixQMqAtNj?p=preview

工作圓環圖中的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>

如果有解決它，請告訴我一個方法。

來源

2016-08-04 Varun

這聽起來像你已經知道解決方案。 – Xufox

但是不知道如何在Angular 2中實現 – Varun

我不是AngularJS的專家，但不應該在AngularJS中以相同的方式工作？畢竟，你的JavaScript就是這樣的：JavaScript。即使使用AngularJS，所有解決方案也應該保持一致。將代碼包裝在'addEventListener（「DOMContentLoaded」，function（）{'...'}）'中，或者將腳本放在''的底部。 – Xufox

試圖聲明畫布如下：

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

您的組成部分將是：

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

更多細節在這裏： https://stackoverflow.com/a/36164708/1267942

來源

2016-08-04 19:16:26

它的工作後，我在把代碼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); 
} 
     } 

}

來源

2016-08-04 19:43:49 Varun

Angular 2 - 使用HTML Canvas時出現「無法讀取屬性'getContext'null」錯誤

回答

相關問題