如何使用 ng2-charts 设置图表的 percentInnerCutout 属性答案

【问题标题】：How to set chart's percentageInnerCutout property with ng2-charts如何使用 ng2-charts 设置图表的 percentInnerCutout 属性
【发布时间】：2019-01-23 06:48:39
【问题描述】：

我正在使用 ng2-charts 并试图使圆环图更薄但没有成功。我也想在中间放一段文字。请帮忙！这是 HTML

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

这是组件

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-dounught-chart',
  templateUrl: './dounught-chart.component.html',
  styleUrls: ['./dounught-chart.component.scss']
})
export class DounughtChartComponent implements OnInit {

  public doughnutChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
  public doughnutChartData: number[] = [350, 450, 100];
  // tslint:disable-next-line:no-inferrable-types
  public doughnutChartType: string = 'doughnut';

  chart: any = { responsive: true};

  // events
  public chartClicked(e: any): void {
    console.log(e);
  }

  public chartHovered(e: any): void {
    console.log(e);
  }
  constructor() { }

  ngOnInit() {
  }
}

【问题讨论】：

标签： angular chart.js ng2-charts

【解决方案1】：

HTML

<canvas baseChart style="height: 100%; width:100%;    position: grid;
bottom: 40px;"
  [datasets]="doughnutChartData"
      [labels]="doughnutChartLabels"
      [chartType]="doughnutChartType"
      [options]="doughnutChartOptions"
      [colors]="doughnutChartColors"></canvas>

ts

doughnutChartOptions:any = { cutoutPercentage: 55, 响应式：真实，传奇： { 显示：真，位置：'底部'，全宽：假，标签：{ 填充：15，字体大小：10，使用点样式：真， fontColor: 'rgb(143, 142, 142)', 框宽：10， } }, }

【讨论】：