ang4でキャンバスをレンダリングする方法

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>