注册chartjs-plugin-datalabels时遇'doughnut'未注册控制器错误求助

控制台报错：

Error: "doughnut" is not a registered controller.

更换所有图表类型后仍出现同类错误。

使用版本 #

• chart.js 4.3.0
• chartjs-plugin-datalabels 2.2.0

已尝试的代码实现 #

插件注册代码 #

import ChartDataLabels from 'chartjs-plugin-datalabels';
Chart.register(<ChartComponentLike>ChartDataLabels);

图表初始化代码 #

this.chart = new Chart('canvas', <ChartConfiguration>{
      plugins: [ChartDataLabels],
      type: 'doughnut',
      data: {
        labels: ['Data1', 'Data2'],
        datasets: [
          {
            data: [55, 45],
            backgroundColor: ['rgba(255, 0, 0, 1)', 'rgba(255, 0, 0, 0.1)'],
            fill: false,
          },
        ],
      },
      options: {
        plugins: {
          datalabels: {
            backgroundColor: function(context) {
              return context.dataset.backgroundColor;
            },
            borderColor: 'white',
            borderRadius: 25,
            borderWidth: 2,
            color: 'white',
            display: function(context) {
              var dataset = context.dataset;
              var count = dataset.data.length;
              var value = dataset.data[context.dataIndex];
              return value > count * 1.5;
            },
            font: {
              weight: 'bold'
            },
            padding: 6,
            formatter: Math.round
          }
        },
    
        // Core options
        aspectRatio: 4 / 3,
        cutoutPercentage: 32,
        layout: {
          padding: 32
        },
        elements: {
          line: {
            fill: true
          },
          point: {
            hoverRadius: 7,
            radius: 5
          }
        },
      }
    });

问题原因与解决方法 #

问题核心 #

Chart.js 4.x 默认启用**树摇（tree-shaking）**机制，不会自动注册所有图表控制器（如doughnut、bar等）和核心元素。你只注册了数据标签插件，未注册环形图所需的控制器和元素，导致报错。

解决步骤 #

1. 注册图表核心组件
   两种方式任选其一：

   • 方式一：自动注册所有核心组件（适合快速开发）

     import Chart from 'chart.js/auto';
     import ChartDataLabels from 'chartjs-plugin-datalabels';
     Chart.register(ChartDataLabels);
     

   • 方式二：手动注册所需组件（优化打包体积）

     import { Chart, DoughnutController, ArcElement } from 'chart.js';
     import ChartDataLabels from 'chartjs-plugin-datalabels';
     // 注册环形图控制器、圆弧元素和数据标签插件
     Chart.register(DoughnutController, ArcElement, ChartDataLabels);
     

2. 修正初始化配置中的废弃项
   Chart.js 4.x 中cutoutPercentage已被废弃，替换为cutout；同时移除环形图不需要的line和point元素配置：

   this.chart = new Chart('canvas', <ChartConfiguration>{
     plugins: [ChartDataLabels],
     type: 'doughnut',
     data: {
       labels: ['Data1', 'Data2'],
       datasets: [
         {
           data: [55, 45],
           backgroundColor: ['rgba(255, 0, 0, 1)', 'rgba(255, 0, 0, 0.1)'],
         },
       ],
     },
     options: {
       plugins: {
         datalabels: {
           backgroundColor: (context) => context.dataset.backgroundColor,
           borderColor: 'white',
           borderRadius: 25,
           borderWidth: 2,
           color: 'white',
           display: (context) => {
             const dataset = context.dataset;
             const count = dataset.data.length;
             const value = dataset.data[context.dataIndex];
             return value > count * 1.5;
           },
           font: {
             weight: 'bold'
           },
           padding: 6,
           formatter: Math.round
         }
       },
       aspectRatio: 4 / 3,
       cutout: '32%', // 替换cutoutPercentage为cutout
       layout: {
         padding: 32
       },
     }
   });
   

3. 兼容性确认
   chartjs-plugin-datalabels 2.2.0 完全兼容Chart.js 4.x，无需调整版本。

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