NG2-Charts问题：如何更改环形图（Doughnut Chart）的内圈宽度

你遇到的核心问题是图表选项的类型定义不匹配，导致无法添加环形图特有的cutout配置。以下是直接可行的解决方案：

关键修改步骤 #

1. 修正选项的类型定义：将doughnutChartOptions的类型从通用的ChartConfiguration['options']改为ChartConfiguration<'doughnut'>['options']，这样就能兼容环形图专属的配置项。
2. 添加cutout配置：在选项中加入cutout属性，通过百分比或像素值控制内圈宽度——数值越大，环形越细，内圈空间越大。

修改后的完整TS代码 #

public doughnutChartLabels: string[] = ['a', 'b', 'c'];
public doughnutChartData: ChartData<'doughnut'> = {
  labels: this.doughnutChartLabels,
  datasets: [
    {
      data: [600, 400, 200],
      backgroundColor: [
        '#AAAAAA',
        '#BBBBBB',
        '#CCCCCC',
      ],
    },
  ],
};
public doughnutChartType: ChartType = 'doughnut';
// 改为环形图专属的选项类型
public doughnutChartOptions: ChartConfiguration<'doughnut'>['options'] = {
  responsive: true,
  // 控制内圈宽度，这里设为70%（可根据需求调整）
  cutout: '70%',
  plugins: {
    legend: {
      display: false,
    },
    datalabels: {
      anchor: 'end',
      align: 'end'
    },
  }
};

说明 #

• cutout的取值规则：
  • 百分比（如'70%'）：内圈直径占图表整体直径的比例，百分比越高，环形越窄；
  • 像素值（如'120px'）：固定内圈直径，适合需要精确控制的场景。
• HTML部分无需修改，保留[type]="doughnutChartType"即可确保图表类型为环形图，避免变为柱状图。

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