angular4에 캔버스를 렌더링하는 방법

Question

angular4 및 ng2 차트로 작업하고 있습니다. 나는 도넛 형 차트 캔버스 중심에 텍스트를 표시해야합니다. 저는 angular4 캔버스를 처음 사용합니다.

Here is my app.component: 

    export class AppComponent { 

     @ViewChild("layout") layout: ElementRef; 


     ngAfterViewInit() { 

     let canvas = this.layout.nativeElement; 

     let context: CanvasRenderingContext2D = this.layout.nativeElement.getContext("2d"); 
     var x = canvas.width/2; 
     var y = canvas.height/2; 

     context.font = '90pt Calibri'; 
     context.textAlign = 'center'; 
     context.fillStyle = 'blue'; 
     context.fillText('Hello Worldetrereygerhg!', x, y); 

     } 


here is my app.component.html 


<div style="display: block; background-color: #e2d8d8;"> 
    <canvas baseChart 
       [data]="doughnutChartData" 
       [colors]="doughnutChartColors" 
       [labels]="doughnutChartLabels" 
       [chartType]="doughnutChartType" 
       (chartHover)="chartHovered1($event)" 
       (chartClick)="chartClicked1($event)" #layout ></canvas> 

</div> 

위의 코드는 아무 효과가 없습니까? 텍스트가 캔버스 어디에도 표시되지 않습니다. 반죽 너트 차트의 텍스트 중심을 추가하는 방법.

Library using: 

[https://valor-software.com/ng2-charts/][1] 
Doughnut 


    [1]: https://valor-software.com/ng2-charts/ 

Answer 1

export class AppComponent { 

     canvas: HTMLCanvasElement; 
     ctx: CanvasRenderingContext2D ; 
     container : any; 
     cw : any; 
     ch : any; 


      ngAfterViewInit() { 
      this.container = document.getElementById('container'); 
      this.cw = container.clientWidth; 
      this.ch = container.clientHeight; 
      this.canvas = document.createElement('canvas'); 
      this.ctx = this.canvas.getContext('2d'); 
      this.canvas.width = this.cw; 
      this.canvas.height = this.ch; 
      container.appendChild(this.canvas); 

      } 

이

<div id="container"></div>