React图表2与图表3：错误“arc”不是已注册的元素

baubqpgj 于 2022-11-06 发布在 Chart.js

关注(0)|答案(8)|浏览(196)

我正在开发一个React应用程序，希望在其中显示图表。我尝试使用react-chartjs-2，但无法找到使其正常工作的方法。当我尝试使用饼图组件时，出现错误：Error: "arc" is not a registered element.
我做了一个非常简单的react应用程序：

npx创建-React-应用程序我的应用程序
npm安装--保存React-chartjs-2个图表. js

这是我的包裹.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

我也试图遵循这一toturial：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）？

chart.js

来源：https://stackoverflow.com/questions/70098392/react-chartjs-2-with-chartjs-3-error-arc-is-not-a-registered-element

8条答案

按热度按时间

polhcujo1#

从chart.js V3开始，chart.js就可以进行树抖动，因此您需要导入并注册正在使用的所有元素。

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

有关所有可用的导入和注册组件的方法，您可以阅读常规的chart.js文档

赞(0）回复(0）举报 2022-11-09

ppcbkaq52#

我之前遇到了同样的问题，在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';

赞(0）回复(0）举报 2022-11-09

esbemjvw3#

在我的例子中，这是有效的：

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

赞(0）回复(0）举报 2022-11-09

l7mqbcuq4#

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

ChartJS.register(ArcElement, Tooltip, Legend);

赞(0）回复(0）举报 2022-11-09

hfsqlsce5#

你可以简单地用这个。对我有用，

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

ChartJS.register(ArcElement, Tooltip, Legend);}

以及用于更改高度和宽度值

{<Pie
   data={data}
   width={300}
   height={300}
   options={{ maintainAspectRatio: false }}
/>}

赞(0）回复(0）举报 2022-11-09

qybjjes16#

在我的情况下，这是什么对我的工作：我在一次导入中导入了图表、配准和ArcElement

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

赞(0）回复(0）举报 2022-11-09

xj3cbfub7#

来自React图表-2文件：正如您在迁移到v4指南中所看到的：

v4 of this library, just like Chart.js v3, is tree-shakable. It means that you need to import and register the controllers, elements, scales, and plugins you want to use.

For a list of all the available items to import, see Chart.js docs.

因此，您应该注册遗漏的元件。例如，如果您有未拦截的错误：“arc”不是已注册的元素。错误，您应该注册ArcElement：

import { ArcElement } from "chart.js";

ChartJS.register(ArcElement);

赞(0）回复(0）举报 2022-11-09

ogq8wdun8#

作为回应，我也遇到了同样的问题与甜甜圈图。npm i react-chartjs-2 chart.js文档说，安装在前端框架;我用的是React

import {Chart,ArcElement} from 'chart.js';
import {Doughnut} from 'react-chartjs-2'

    Chart.register(ArcElement)

    const data = {
    };

    function Graph() {
      return (
       <div></div>
      )
    }

    export default Graph

导入ArcElement from chart.js和Chart.register(ArcElement)后修复了我的问题

赞(0）回复(0）举报 2022-11-09

我来回答

React图表2与图表3：错误“arc”不是已注册的元素

8条答案

相关问题

热门标签

最新问答