Angular 2 ng2-charts甜甜圈文字在中間？

Question

我在ng2-charts（http://valor-software.com/ng2-charts/）中使用角度爲2的甜甜圈圖表。 我一直在尋找一個選項，在中間放置一個文本而沒有成功。 我已經在ng-chart選項中搜索，如chart.js（依賴）。 你知道在Angular 2打字稿中實現這一點的另一種方法嗎？或者有什麼我失蹤？

Answer 1

您可以執行以下操作將文字置於圓環圖的中央。它的工作對我來說

HTML：

<div style="display: block"> 
    <canvas #mycanvas baseChart 
       [data]="doughnutChartData" 
       [labels]="doughnutChartLabels" 
       [chartType]="doughnutChartType" 
       (chartHover)="chartHovered($event)" 
       (chartClick)="chartClicked($event)"></canvas> 
</div> 

打字稿

import {Component, NgModule, ElementRef, Inject, ViewChild} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
import {ChartsModule, Color} from 'ng2-charts'; 

export class App{ 
    @ViewChild('mycanvas') 
    canvas:ElementRef; 

ngOnInit(){ 
    var ctx = this.canvas.nativeElement.getContext("2d"); 

    let me = this; 
    this.options = { 

     circumference: Math.PI, 
     rotation : Math.PI, 
     animation:{ onComplete: function() { 
     me.doit(ctx); 
     }} 
    } 

     } 

    doit(ctx) { 
     // Chart.types.Doughnut.prototype.draw.apply(this, arguments); 

      var width = this.canvas.nativeElement.clientWidth, 
       height = this.canvas.nativeElement.clientHeight; 

      var fontSize = (height/250).toFixed(2); 
      ctx.font = fontSize + "em Verdana"; 
      ctx.textBaseline = "middle"; 
      ctx.fillStyle = "blue"; 

      var text = "Pass Rate 82%", 
       textX = Math.round((width - ctx.measureText(text).width)/2), 
       textY = height -10; 

      ctx.fillText(text, textX, textY); 
      ctx.restore(); 
     } 
} 
}