Chart.js与ng2-charts升级后Doughnut图表cutout选项失效求助

问题原因 #

Chart.js v4版本对配置结构做了调整，环形图（Doughnut/Pie）的cutout、radius等专属配置不再放在全局options中，而是需要定义在datasets的配置项里。同时TypeScript类型定义同步收紧，全局options里不存在cutout字段，直接设置会触发类型错误，且配置不会生效。

解决方案 #

1. 调整配置层级到dataset #

将cutout属性从全局options移至datasets数组的对应对象中：

组件类示例（TypeScript）

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

@Component({
  selector: 'app-doughnut-chart',
  templateUrl: './doughnut-chart.component.html'
})
export class DoughnutChartComponent {
  public doughnutChartType: ChartType = 'doughnut';

  public doughnutChartData: ChartConfiguration['data'] = {
    labels: ['A', 'B', 'C'],
    datasets: [
      {
        data: [30, 50, 20],
        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
        // 在这里设置cutout
        cutout: '94%' // 支持百分比或像素值，如'50px'
      }
    ]
  };

  public doughnutChartOptions: ChartConfiguration['options'] = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top'
      }
    }
  };
}

模板示例（HTML）

<canvas baseChart
        [data]="doughnutChartData"
        [type]="doughnutChartType"
        [options]="doughnutChartOptions">
</canvas>

2. 解决TypeScript类型提示问题 #

若仍有类型错误，确保：

• 导入正确的类型：import { ChartConfiguration, ChartType } from 'chart.js';
• 明确指定图表类型为'doughnut'，让TypeScript自动推导dataset的正确类型（包含cutout字段）
• 如需手动指定dataset类型，可使用ChartConfiguration<'doughnut'>['data']['datasets'][0]

3. 全局配置所有环形图的cutout（可选） #

如果需要给所有环形图统一设置cutout，可在Angular初始化代码（如app.module.ts）中全局配置：

import { Chart } from 'chart.js';

Chart.defaults.datasets.doughnut.cutout = '94%';

验证效果 #

修改配置后重新运行项目，环形图的内圈裁剪比例会生效，同时TypeScript类型错误会消失。

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