chartjs cutoutPercentage 和工具提示在 nextjs 中不起作用

Question

我的 next.js 项目中有这段代码，我在其中使用 react-chartjs-2 库创建图表。 chart.js 中的 cutoutPercentage 属性理论上可以使圆环图变薄，但在 next.js 中不起作用。我怎样才能让它工作？

import { Doughnut  } from 'react-chartjs-2';

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

const Options = {
    tooltips: {
      enabled: false,
    },
    cutoutPercentage: 70,
    responsive: true,
    maintainAspectRatio: false,
}

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

Answer 1

您为 Chart.js 版本 2.x 定义了 Options，但您很可能使用 Chart.js 版本 3.x，这就是它不起作用的原因。

请查看 3.x Migration Guide 以了解更改了哪些选项。对于您的情况，以下几点是相关的：

tooltips 命名空间已重命名为 tooltip 以匹配插件名称。
Doughnut cutoutPercentage 已重命名为 cutout 并接受像素作为数字和百分比作为以 % 结尾的字符串。

因此，您需要将 Options 更改如下：

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

chartjs cutoutPercentage 和工具提示在 nextjs 中不起作用

chartjs cutoutPercentage and tooltips does not works in nextjs

reactjs

next.js

chart.js

react-chartjs-2