react-chartjs-2 with chartJs 3: Error "arc" is not a registered element

Question

我正在开发一个 React 应用程序，我想在其中显示图表。我尝试使用 react-chartjs-2 但我找不到让它工作的方法。当我尝试使用 Pie 组件时，出现错误：Error: "arc" is not a registered element.

我做了一个非常简单的 React 应用程序：

npx create-react-app 我的应用程序
npm install --save react-chartjs-2 chart.js

这是我的 package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "chart.js": "^3.6.0",
    "cra-template": "1.1.2",
    "react": "^17.0.2",
    "react-chartjs-2": "^4.0.0",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

这是我的 App.js 文件：

import React from 'react'
import { Pie } from 'react-chartjs-2'

const BarChart = () => {
  return (
    <Pie
      data={{
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [
          {
            label: '# of votes',
            data: [12, 19, 3, 5, 2, 3],
          },
        ],
      }}
      height={400}
      width={600}
    />
  )
}

const App = () => {
  return (
    <div>
      <BarChart />
    </div>
  )
}

export default App

我也试着按照这个教程：https://www.youtube.com/watch?v=c_9c5zkfQ3Y&ab_channel=WornOffKeys

他使用旧版本的 charJs 和 react-chartjs-2。当我替换我的 react-chartjs-2 和 chartjs 版本时，它可以在我的应用程序上运行。

"chart.js": "^2.9.4",
"react-chartjs-2": "^2.10.0",

有谁知道如何解决我遇到的错误（无需保留旧版本的 chartJs 和 react-chartjs-2）？

Answer 1

Chart.js 自 chart.js V3 起可进行 treeshaking，因此您需要导入并注册您正在使用的所有元素。

import {Chart, ArcElement} from 'chart.js'
Chart.register(ArcElement);

对于所有可用的导入和注册组件的方法，您可以阅读正常的 chart.js documentation

Answer 2

我运行早些时候遇到过同样的问题，在 react-chartjs-2 文档页面上找到了解决方案：https://react-chartjs-2.netlify.app/docs/migration-to-v4#tree-shaking

import 'chart.js/auto';
import { Chart } from 'react-chartjs-2';

<Chart type='line' data={chartData} />

你所要做的就是添加这一行 import 'chart.js/auto';

Answer 3

在我的例子中，这对我有用：我在一次导入中导入了图表、可注册文件和 ArcElement

import { Chart, registerables, ArcElement } from "chart.js";
Chart.register(...registerables);
Chart.register(ArcElement);

Answer 4

在我的例子中这有效：

import React from "react";
import { ArcElement } from "chart.js";
import Chart from "chart.js/auto";

Answer 5

import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
import { Pie } from 'react-chartjs-2';

ChartJS.register(ArcElement, Tooltip, Legend);

react-chartjs-2 with chartJs 3: Error "arc" is not a registered element

react-chartjs-2 with chartJs 3: Error "arc" is not a registered element

reactjs

chart.js

react-chartjs-2