如何使用 ng2 图表设置图表的百分比InnerCutout 属性

Question

>im 使用 ng2 图表并试图使甜甜圈图更薄但没有成功。 我也想在中间放一个文本。 请帮忙！这是 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() {
  }
}

Answer 1

• 目录

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

• TS

  甜甜圈图表选项：任意 = {挖空百分比： 55，响应式：真，图例：{ 显示：真， 位置："底部"， 全宽：假， 标签：{ 填充： 15， 字体大小： 10， usePointStyle： true， 字体颜色： 'rgb(143， 142， 142('， 箱宽： 10， }},}