我的react-chartjs-2组件不工作，正在破坏我的应用程序

Question

我在Stack Overflow上看到了许多与此问题相关的问题，但他们都使用react-chartjs-2和chart.js在一起。我只使用react-chartjs-2没有chart.js(因为我正在关注YouTube上的MERN电子商务课程。)

问题是我的图表不想出现在我的网站上，它们会使我的页面崩溃。

在我的控制台日志中，我收到一个错误:

Uncaught Error: "category" is not a registered scale.

导入图表的地方:dashboard.jsx:

import React, { useEffect } from "react";
import Sidebar from "./Sidebar.js";
import "./dashboard.css";
import { Typography } from "@material-ui/core";
import { Link } from "react-router-dom";
import { Doughnut, Line } from "react-chartjs-2";
import { useSelector, useDispatch } from "react-redux";
import MetaData from "../../more/MetaData";
import Loading from "../../more/Loading";
import { getAdminProduct } from "../../actions/ProductActions.js";
import { getAllOrders } from "../../actions/OrderAction.js";
import { getAllUsers } from "../../actions/userActions.js";
const Dashboard = () => {
const dispatch = useDispatch();
const { products, loading } = useSelector((state) => state.products);
const { orders } = useSelector((state) => state.AllOrders);
const { users } = useSelector((state) => state.allUsers);
let outOfStock = 0;
products &&
products.forEach((item) => {
if (item.Stock === 0) {
outOfStock += 1;
}
});
useEffect(() => {
dispatch(getAdminProduct());
dispatch(getAllOrders());
dispatch(getAllUsers());
}, [dispatch]);
let totalAmount = 0;
orders &&
orders.forEach((item) => {
totalAmount += item.totalPrice;
});
const lineState = {
labels: ["Initial Amount", "Amount Earned"],
datasets: [
{
label: "TOTAL AMOUNT",
backgroundColor: ["#3BB77E"],
hoverBackgroundColor: ["#3BB77E"],
data: [0, totalAmount],
},
],
};
const doughnutState = {
labels: ["Out of Stock", "InStock"],
datasets: [
{
backgroundColor: ["#00A6B4", "#6800B4"],
hoverBackgroundColor: ["#4B5000", "#35014F"],
data: [outOfStock, products?.length - outOfStock],
},
],
};
return (
<>
{loading ? (
<Loading />
) : (
<div className="dashboard">
<MetaData title="Dashboard" />
<Sidebar />
<div className="dashboardContainer">
<Typography component="h1">Dashboard</Typography>
<div className="dashboardSummary">
<div>
<p>
Total Amount <br /> ${totalAmount}
</p>
</div>
<div className="dashboardSummaryBox2">
<Link to="/admin/products">
<p>Product</p>
<p>{products && products.length}</p>
</Link>
<Link to="/admin/orders">
<p>Orders</p>
<p>{orders && orders.length}</p>
</Link>
<Link to="/admin/users">
<p>Users</p>
<p>{users && users.length}</p>
</Link>
</div>
</div>
<div className="lineChart">
<Line data={lineState} />
</div>
<div className="doughnutChart">
<Doughnut data={doughnutState} />
</div>
</div>
</div>
)}
</>
);
};
export default Dashboard;

我的折线图和甜甜圈图不工作，打破了我的应用程序，但当我把它们注释出来时，我的网站又工作了。

我正在使用react-chartjs-2版本5.0.1

我已经试图解决这个问题几天了，但从我所看到的人们似乎使用react-chartjs-2与chart.js在一起，但我的课程老师没有，这对他有效。

任何帮助都会很感激。谢谢你

Answer 1

Chartjs是可摇树的，所以你需要注册category，或者你可以注册所有的。

import { CategoryScale, Chart } from "chart.js";
Chart.register(CategoryScale);
// OR
import { Chart, registerables } from "chart.js"
Chart.register(...registerables);

来源:https://react chartjs - 2. - js.org/faq/registered scale/