在RangeError应用程序中使用ChartJS错误“minimumFractionDigits值超出范围”
在RangeError应用程序中使用ChartJS错误“minimumFractionDigits值超出范围”
提问于 2022-09-24 19:36:20
我试图使用react-chartjs-2.js创建一个应用程序--它在本地工作，但是在生产中，它会产生以下错误：
Application error: a client-side exception has occurred (see the browser console for more information).这是我的浏览器错误控制台错误
framework-7751730b10fa0f74.js:9
RangeError: minimumFractionDigits value is out of range.
at new NumberFormat (<anonymous>)
at 389-ed817b9827d847c5.js:11:22041
at e3 (389-ed817b9827d847c5.js:11:22084)
at e1.numeric (3fff1979-b3fd6dd997b88037.js:6:36399)
at g (389-ed817b9827d847c5.js:6:4424)
at e1.generateTickLabels (3fff1979-b3fd6dd997b88037.js:6:44125)
at e1._convertTicksToLabels (3fff1979-b3fd6dd997b88037.js:6:47183)
at e1.update (3fff1979-b3fd6dd997b88037.js:6:41586)
at tp (3fff1979-b3fd6dd997b88037.js:6:66794)
at Object.update (3fff1979-b3fd6dd997b88037.js:6:69634)
um @ framework-7751730b10fa0f74.js:9
main-e7a7892cb0edc024.js:1
RangeError: minimumFractionDigits value is out of range.
at new NumberFormat (<anonymous>)
at 389-ed817b9827d847c5.js:11:22041
at e3 (389-ed817b9827d847c5.js:11:22084)
at e1.numeric (3fff1979-b3fd6dd997b88037.js:6:36399)
at g (389-ed817b9827d847c5.js:6:4424)
at e1.generateTickLabels (3fff1979-b3fd6dd997b88037.js:6:44125)
at e1._convertTicksToLabels (3fff1979-b3fd6dd997b88037.js:6:47183)
at e1.update (3fff1979-b3fd6dd997b88037.js:6:41586)
at tp (3fff1979-b3fd6dd997b88037.js:6:66794)
at Object.update (3fff1979-b3fd6dd997b88037.js:6:69634)
J @ main-e7a7892cb0edc024.js:1
main-e7a7892cb0edc024.js:1
A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred这是我的密码
import React from "react";
import { Line } from "react-chartjs-2";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
} from "chart.js";
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
);
export const options = {
responsive: true,
plugins: {
legend: {
position: "top",
},
title: {
display: false,
},
},
};
const labels = [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday",
];
export const data = {
labels,
datasets: [
{
label: "Weekley Data",
data: [10, 20, 30, 40, 50, 60, 70],
borderColor: "rgb(255, 99, 132)",
backgroundColor: "rgba(255, 99, 132, 0.5)",
},
],
};
function Components() {
return (
<div style={{ width: "80%" }}>
<Line options={options} data={data} />
</div>
);
}
export default Components;它在开发环境中的localhost:3000上工作得很好，但是它在生产环境/部署到服务器时会中断。
有人能帮我理解和解决这个问题吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2022-11-21 11:18:51
这是nextJS版本和ChartJS版本之间的版本问题。
例如，我在nextJS 12.3.1和chartJS 4.0.1上。切换到12.3.2-canary.10或切换回chartJS 2.9.4为我修复了它。
您也可以将swcMinify: false而不是true放在您的next.config.js中，但这是一个临时修复，将减慢您的构建时间。
Stack Overflow用户
发布于 2022-09-25 18:45:35
我找到了答案这里
只需在swcMinify: false中添加next.config.js
Stack Overflow用户
发布于 2022-09-25 15:09:57
根据我在网上的发现，在运行不兼容版本的Chart.js /react图表时，会出现tat错误。
不过，我发现了问题。问题是，我使用的是V3.1Chart.js，而试图使用v3.5 Chart.js中的设置。更改了JS文件版本，现在它运行良好。
来自https://www.npmjs.com/package/react-chartjs-2
我们建议使用chart.js@^3.0.0。
看看你是不是在运行正确的版本..。
另一种可能的解决办法是：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73840076
复制相关文章
相似问题
腾讯云开发者
