ng2-charts环形图设置cutout值报错及配置问题求助

针对chart.js@4.0.1、ng2-charts@4.1.1版本出现的Type 'keyof ChartTypeRegistry' is not assignable to type "doughnut"错误，以及cutout配置的正确写法，解决方案如下：

核心问题原因 #

未给ChartConfiguration指定具体的图表类型泛型，导致类型推断为通用的keyof ChartTypeRegistry，与组件期望的具体类型不匹配；同时Chart.js v4中cutout选项的位置已调整到options.plugins.doughnut下。

具体解决方案 #

1. 明确配置的泛型类型 #

定义图表配置时，给ChartConfiguration指定<'doughnut'>泛型，锁定为环形图类型，解决类型不兼容问题。

2. 正确设置cutout参数 #

在配置的options.plugins.doughnut中设置cutout值，支持百分比字符串（如'70%'）或像素数值（如100）。

完整代码示例 #

组件.ts文件：

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

@Component({
  selector: 'app-doughnut-chart',
  templateUrl: './doughnut-chart.component.html'
})
export class DoughnutChartComponent {
  // 指定泛型为'doughnut'，锁定图表类型
  public doughnutChartConfig: ChartConfiguration<'doughnut'> = {
    type: 'doughnut',
    data: {
      labels: ['A', 'B', 'C'],
      datasets: [{
        data: [40, 30, 30],
        backgroundColor: ['#f56954', '#00a65a', '#f39c12']
      }]
    },
    options: {
      plugins: {
        doughnut: {
          cutout: '70%' // 设置环形空心占比
        }
      }
    }
  };
}

组件模板文件：

<canvas baseChart
        [data]="doughnutChartConfig.data"
        [type]="doughnutChartConfig.type"
        [options]="doughnutChartConfig.options">
</canvas>

额外说明 #

• 若需要单独定义options类型，可以使用ChartConfiguration<'doughnut'>['options']来获取环形图专属的options类型，避免类型提示错误：

  public chartOptions: ChartConfiguration<'doughnut'>['options'] = {
    plugins: {
      doughnut: {
        cutout: '60%'
      }
    }
  };
  

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