react-chartjs-2与chartJs 3：错误“arc”不是注册元素

问题描述 投票：0回答：11

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

Error: "arc" is not a registered element.

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

  • npx create-react-app my-app
  • npm install--保存react-chartjs-2图表.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",

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

reactjs chart.js react-chartjs-2
11个回答
67
投票

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

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

对于所有可用的导入和注册组件的方法，您可以阅读普通的 Chart.js 文档

21
投票

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

3
投票

就我而言，这有效：

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

您可以简单地使用这个。为我工作，

    {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 }}
/>}
3
投票

在反应中，我也遇到了与圆环图相同的问题。

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)
解决了我的问题

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

ChartJS.register(ArcElement, Tooltip, Legend);
1
投票

就我而言，这对我有用：我在一次导入中导入了图表、可注册项和 ArcElement

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

来自react-chartjs-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
投票
[my app displayed on browser][1]


  [1]: https://i.stack.imgur.com/i4Owk.jpg
My app compiled without errors but my chart(Doghnut) is not been displayed on the browser.

here is my details component where i imported and used it 

import React from 'react';
import { Card, CardHeader, CardContent, Typography } from '@material-ui/core';
import {Chart, ArcElement} from 'chart.js';
import { Doughnut } from 'react-chartjs-2';

import useStyles from './styles';
import useTransactions from '../../useTransactions';
Chart.register(ArcElement)
const Details = ({ title, subheader }) => {
  const { total, chartData } = useTransactions(title);
  const classes = useStyles();

  return (
    <Card className={title === 'Income' ? classes.income : classes.expense}>
      <CardHeader title={title} subheader={subheader} />
      <CardContent>
        <Typography variant="h5">${total}</Typography>
        <Doughnut data={chartData} />
      </CardContent>
    </Card>
  );
};

export default Details;




here also is my package.json file
{
  "name": "tracker",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.12.4",
    "@material-ui/icons": "^4.11.3",
    "@material-ui/lab": "^4.0.0-alpha.61",
    "@speechly/react-client": "^2.2.3",
    "@speechly/react-ui": "^2.7.5",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "chart.js": "^4.3.0",
    "react": "^16.12.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^16.12.0",
    "react-scripts": "5.0.1",
    "uuid": "^9.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}


my app.js file where i imported my details component above
import React, { useEffect, useRef } from 'react';
import { Grid } from '@material-ui/core';

import { SpeechState, useSpeechContext } from "@speechly/react-client";
import { PushToTalkButton, PushToTalkButtonContainer } from '@speechly/react-ui';

import  Details from './components/Details/Details';
import  Main from './components/Main/Main';

import useStyles from './styles';

const App = () => {
  const classes = useStyles();
  const { speechState } = useSpeechContext();
  const main = useRef(null);

  const executeScroll = () => main.current.scrollIntoView() ;   

  useEffect(() => {
    if (speechState === SpeechState.Recording) {
      executeScroll();
    }
  }, [speechState]);

  return (
    <div>
      <Grid className={classes.grid} container spacing={0} alignItems="center" justifyContent ="center" style={{ height: '100vh'}}>
        <Grid item xs={12} sm={4} className={classes.mobile}>
          <Details title="Income" />
        </Grid>
        <Grid ref={main} item xs={12} sm={3} className={classes.main}>
          <Main />
        </Grid>
        <Grid item xs={12} sm={4} className={classes.desktop}>
          <Details title="Income" />
        </Grid>
        <Grid item xs={12} sm={4} className={classes.last}>
          <Details title="Expense" />
        </Grid>
        <PushToTalkButtonContainer>
          <PushToTalkButton />   
        </PushToTalkButtonContainer>
      </Grid>
    </div>
  );
};

export default App;




 I do not know where the problem is coming from

here is my index.js file
import React from 'react';
import  ReactDOM  from 'react-dom';
import {SpeechProvider} from '@speechly/react-client';

import { Provider } from "./context/context";

import App from './App';
import './index.css';

    ReactDOM.render(
        <SpeechProvider appid='60b621bc-87ac-41e5-b500-0b7a66f96317' language='en-US'>
            <Provider>
              <App/>
            </Provider>
        </SpeechProvider>,

document.getElementById('root') );

0
投票

只需将 package.json 和 packagelock.json 中的 Chart.js 更新为最新版本即可。 并执行 npm istall --force 这些错误不断出现，您修复了另一个相同类型的错误，再次出现 nfd。

0
投票

从“chart.js/auto”导入{chart as Chartjs} 导入这一行就可以了

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.