Next.js中react-chartjs-2的cutoutPercentage与tooltips配置不生效如何解决

问题原因 #

你当前使用的是适配 Chart.js 3.x/4.x 版本的 react-chartjs-2 封装，你写的配置是 Chart.js 2.x 的旧语法，所以配置不生效，按以下规则调整即可： #

调整要点 #

• 首先需要先注册 Chart.js 对应的依赖组件，新版 react-chartjs-2 不会自动注册所有模块，未注册的模块功能不会生效
• 提示框配置路径调整：原根节点下的 tooltips 配置迁移到 plugins.tooltip 节点下
• 甜甜圈粗细配置替换：原 cutoutPercentage 属性已废弃，替换为 cutout 属性，值传入百分比字符串即可匹配原效果

调整后完整代码 #

import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
import { Doughnut } from 'react-chartjs-2';

// 注册依赖模块
ChartJS.register(ArcElement, Tooltip, Legend);

const data = {
  datasets: [
    {
      data: [15, 12, 40, 30],
      backgroundColor: ["#c5e99b", "#8fbc94", "#548687", "#56445d"],
    },
  ],
};

const options = {
  plugins: {
    tooltip: {
      enabled: false,
    },
  },
  cutout: '70%',
  responsive: true,
  maintainAspectRatio: false,
}

export default () => (
  <Doughnut 
    data={data}
    width={290}
    height={290}
    options={options}
  />
);

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