4
我在ng2-charts(http://valor-software.com/ng2-charts/)中使用角度为2的甜甜圈图表。 我一直在寻找一个选项,在中间放置一个文本而没有成功。 我已经在ng-chart选项中搜索,如chart.js(依赖)。 你知道在Angular 2打字稿中实现这一点的另一种方法吗?或者有什么我失踪?Angular 2 ng2-charts甜甜圈文字在中间?
我在ng2-charts(http://valor-software.com/ng2-charts/)中使用角度为2的甜甜圈图表。 我一直在寻找一个选项,在中间放置一个文本而没有成功。 我已经在ng-chart选项中搜索,如chart.js(依赖)。 你知道在Angular 2打字稿中实现这一点的另一种方法吗?或者有什么我失踪?Angular 2 ng2-charts甜甜圈文字在中间?
您可以执行以下操作将文字置于圆环图的中央。它的工作对我来说
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();
}
}
}
真棒!这适用于我,我只需将文本放置在图表的中间,所以'textY'变量应该是:'textY = height/2'。另外,似乎每当鼠标悬停在图表上时,函数'doit'被调用,所以文本消失并再次出现。所以,你应该做下一个,以解决它.. https://stackoverflow.com/a/43286397/2621320 –