Question

我使用angular4和ng2图表。我需要在圆环图的画布中心内显示文字。我是angular4 canvas的新手。

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

在组件类中构建画布并将其动态插入HTML

 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);

          }

在HTML

中添加以下div标签

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

如何在angular4中渲染画布

1 个答案: