在Chart.JS中阅读Map和ForwardRef错误- Javascript

91zkwejq  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(197)

我正在尝试使用chart.js创建图表。我已经按照chart.js网站上的示例代码进行了操作,并且能够使示例代码正常工作。我尝试修改代码,以便在创建图表的javascript文件的外部处理图表数据,然后通过图表参数提供数据。这样做时,我收到以下控制台错误:

我的data.js文件中有以下数据:

  1. export const UserData = [
  2. {
  3. id: 1,
  4. year: 2018,
  5. users: 2000,
  6. },
  7. {
  8. id: 2,
  9. year: 2019,
  10. users: 2500,
  11. },
  12. {
  13. id: 3,
  14. year: 2020,
  15. users: 3000,
  16. }
  17. ]

我在我的App.js文件中有以下代码:

  1. import React from "react";
  2. import { UserData } from './Components/data';
  3. import { Graph } from "./Components/graph";
  4. const data = {
  5. labels: UserData.map((data) => data.year),
  6. datasets: [{
  7. label: 'Revenue',
  8. data: UserData.map((data) => data.users),
  9. backgroundColor: ['#CCD4BF'],
  10. borderColor: [],
  11. borderWidth: 1
  12. }]
  13. };
  14. function App() {
  15. return <Graph graphData={data}/>
  16. }

我在我的graph.js文件中有以下代码:

  1. import React from 'react';
  2. import { Bar } from 'react-chartjs-2';
  3. import {Chart as ChartJS,} from 'chart.js/auto'
  4. export function Graph(graphData) {
  5. return <Bar data={graphData}/>
  6. }

我的代码中是否缺少了解决“阅读Map”和“ForwardRef”错误的内容?

kx5bkwkv

kx5bkwkv1#

我遇到了同样的问题,为了解决这个问题,我使用了树摇动方法:

  1. import { Chart } from 'react-chartjs-2';
  2. import { Chart as ChartJS, LineController, LineElement, PointElement, LinearScale, Title } from 'chart.js';
  3. ChartJS.register(LineController, LineElement, PointElement, LinearScale, Title);
  4. <Chart type='line' data={chartData} />

相关问题