chartjs的cutoutPercentage和tooltips在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定义了Options。但你最可能使用Chart.js版本3。X，这就是为什么它不起作用。

请看一下。x迁移指南，以找出哪些选项已更改。对于您的情况，以下几点是相关的:

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

相应地，您需要更改您的Options如下:

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