如何使用ng2-charts为doughnut环形图设置cutout属性？

配置不生效和TS类型报错来自两个核心错误：

1. 配置层级错误：第二种写法额外嵌套了一层options属性，ng2-charts的[options]输入属性接收的就是Chart.js配置的根对象，不需要再套一层options外壳。
2. 类型声明错误：直接使用无泛型参数的ChartOptions类型时，TypeScript只会加载全图表通用的配置定义，不会包含环形图专属的cutout属性，因此抛出类型不匹配错误。使用any类型跳过TS校验的写法，会丢失类型提示，也容易出现隐式的配置覆盖问题导致不生效。

TypeScript 部分 #

import { Component } from '@angular/core';
import { ChartData, ChartType, ChartOptions } from 'chart.js';

@Component({
  selector: 'app-summary-chart',
  templateUrl: './summary-chart.component.html',
  styleUrls: ['./summary-chart.component.scss']
})
export class SummaryChartComponent {
  // 环形图基础配置
  doughnutChartType: ChartType = 'doughnut';
  doughnutChartLabels: string[] = ['Tickets', 'Free sales'];
  doughnutChartData: ChartData<'doughnut'> = {
    labels: this.doughnutChartLabels,
    datasets: [{
      data: [60, 40],
      backgroundColor: ["#ef2c49", "#1c4d86"],
      rotation: 90,
    }]
  };

  // 正确options配置：指定泛型为'doughnut'，cutout直接放在配置根层级
  doughnutChartOptions: ChartOptions<'doughnut'> = {
    cutout: '70%', // 支持百分比字符串，也可传入数字类型的像素值
    responsive: true, // 其余通用配置直接写在同级即可
  };
}

HTML 部分 #

原有HTML绑定逻辑不需要修改，保持如下即可：

<div class="chart-wrapper">
  <canvas 
    baseChart 
    [data]="doughnutChartData" 
    [type]="doughnutChartType" 
    [labels]="doughnutChartLabels" 
    [options]="doughnutChartOptions">
  </canvas>
</div>

• 请确认本地依赖版本匹配：ng2-charts@5.x 对应 chart.js@4.x，ng2-charts@4.x 对应 chart.js@3.x，两个版本区间内cutout的配置规则一致，上述写法均可生效。
• 如果需要动态修改cutout值，修改配置对象后需要手动触发图表更新，或通过ng2-charts暴露的chart实例调用update()方法生效。

内容的提问来源于stack exchange，提问作者ElenaLj