我正在尝试使用 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
上运行良好,但在生产环境/部署到服务器时会出现问题。
有人能帮我理解并解决这个问题吗?