chartjs cutoutPercentage 和 tooltips 在 nextjs 中不起作用

【问题标题】：chartjs cutoutPercentage and tooltips does not works in nextjschartjs cutoutPercentage 和 tooltips 在 nextjs 中不起作用
【发布时间】：2021-09-13 22:33:39
【问题描述】：

我的 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}
    />
);

【问题讨论】：

它是否在服务器上显示文档/窗口未定义的错误？
没有服务器或客户端没有错误
给export comp命名并使用它来导入组件。 const DynamicComponentWithNoSSR = dynamic(() => import('../components/hello3'),{ ssr: false })

标签： reactjs next.js chart.js react-chartjs-2

【解决方案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,
}

【讨论】：