中间有角2 ng2-charts甜甜圈文字? [英] Angular 2 ng2-charts doughnut text in the middle?

问题描述

我正在使用ng2-charts中的甜甜圈图( http://valor-software.com/ng2 -charts/)(角度为2). 我一直在寻找一个选项，将文本放在中间而没有成功. 我已经像在chart.js(依赖项)中一样在ng-chart选项中进行了搜索. 您知道在Angular 2打字稿中实现此目的的另一种方法吗?还是我缺少什么?

I am using Doughnut chart from ng2-charts (http://valor-software.com/ng2-charts/) in angular 2. I have been searching for an option to put a text in the middle without success. I already searched in ng-chart options as in chart.js (dependency). Do you know another way to achieve this in Angular 2 typescript? or there is something I am missing?

推荐答案

您可以执行以下操作将文本放置在甜甜圈图的中心.它对我有用

You can do the following to place text in the center of doughnut chart. It worked for me

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

这篇关于中间有角2 ng2-charts甜甜圈文字?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！