“插件”无法实现图表选项中的“剪切”

Question

我的图表对象定义如下：

this.chart = new Chart("myChart", {
      type: 'doughnut',
      data: {
        
        datasets: [
          {
            label: labeldata,
            data: realdata,
            backgroundColor: colordata,            
          }, 
        ]
      },
      plugins: [ChartDataLabels],
      options: {
        cutout: 70,
        plugins: {
          datalabels: {
            display: true,
            borderRadius: 3,
            color:'white',            
            font: {              
              weight: 'bold',
            },
          },}
      }
    });

我收到以下 TypeScript 错误：

Type '{ maintainAspectRatio: false; plugins: { legend: { maxWidth: number | undefined; position: "bottom" | "right"; title: { display: boolean; text: string; padding: number; }; display: boolean; labels: { usePointStyle: true; pointStyle: "circle" | "rect"; font: { size: number; }; }; }; tooltip: { callbacks: { label: () => string; }; }; }; cutout: string; }' is not assignable to type '_DeepPartialObject<CoreChartOptions<keyof ChartTypeRegistry> & ElementChartOptions<keyof ChartTypeRegistry> & PluginChartOptions<keyof ChartTypeRegistry> & DatasetChartOptions<keyof ChartTypeRegistry> & ScaleChartOptions<keyof ChartTypeRegistry>>'.
  Object literal may only specify known properties, and 'cutout' does not exist in type '_DeepPartialObject<CoreChartOptions<keyof ChartTypeRegistry> & ElementChartOptions<keyof ChartTypeRegistry> & PluginChartOptions<keyof ChartTypeRegistry> & DatasetChartOptions<keyof ChartTypeRegistry> & ScaleChartOptions<keyof ChartTypeRegistry>>'.

删除“剪切”选项可以消除错误，但也会更改图表的显示。

我注意到删除插件：[ChartDataLabels]块也修复了错误。

chart.js 版本 4.4.3

我想使用“剪切”来设计图表 但当我也使用插件时出现错误

Answer 1

我终于找到了解决方案：

我删除

plugins: [ChartDataLabels]

并添加了

Chart.register(ChartDataLabels);

- 将插件注册到所有图表。

Chart.register(ChartDataLabels);//Register once
this.chart = new Chart("myChart", {
          type: 'doughnut',
          data: {
            
            datasets: [
              {
                label: labeldata,
                data: realdata,
                backgroundColor: colordata,            
              }, 
            ]
          },
          options: {
            cutout: 70,
            plugins: {
              datalabels: {
                display: true,
                borderRadius: 3,
                color:'white',            
                font: {              
                  weight: 'bold',
                },
              },}
          }
        });

这样设计就不会丢失