条形图未显示错误：“类别”不是注册比例

Question

我正在尝试在reactjs 中显示条形图。我还下载了条形图chart.js和react-chartjs-2的依赖项

   "chart.js": "^3.6.0",
    "react": "^17.0.2",
    "react-chartjs-2": "^4.0.0",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",

但条形图未显示内容，我仍然收到错误

Reactjs

import React from "react";
import { Bar } from "react-chartjs-2";
const BarComponent = () => {
  return (
    <>
      <Bar
        width={600}
        height={400}
        data={{
          labels: ["January", "February", "March", "April", "May", "June"],
          datasets: [
            {
              label: "months",
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: "red",
            },
          ],
        }}
      />
    </>
  );
};
export default BarComponent;

我在这里可能会缺少什么？

Answer 1

您错过了寄存器部分，请尝试添加它。

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';

然后在组件外部注册它

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

您可以参考此处文档中的示例