我正在尝试使用chart.js创建图表。我已经按照chart.js网站上的示例代码进行了操作,并且能够使示例代码正常工作。我尝试修改代码,以便在创建图表的javascript文件的外部处理图表数据,然后通过图表参数提供数据。这样做时,我收到以下控制台错误:
我的data.js文件中有以下数据:
export const UserData = [
{
id: 1,
year: 2018,
users: 2000,
},
{
id: 2,
year: 2019,
users: 2500,
},
{
id: 3,
year: 2020,
users: 3000,
}
]
我在我的App.js文件中有以下代码:
import React from "react";
import { UserData } from './Components/data';
import { Graph } from "./Components/graph";
const data = {
labels: UserData.map((data) => data.year),
datasets: [{
label: 'Revenue',
data: UserData.map((data) => data.users),
backgroundColor: ['#CCD4BF'],
borderColor: [],
borderWidth: 1
}]
};
function App() {
return <Graph graphData={data}/>
}
我在我的graph.js文件中有以下代码:
import React from 'react';
import { Bar } from 'react-chartjs-2';
import {Chart as ChartJS,} from 'chart.js/auto'
export function Graph(graphData) {
return <Bar data={graphData}/>
}
我的代码中是否缺少了解决“阅读Map”和“ForwardRef”错误的内容?
1条答案
按热度按时间kx5bkwkv1#
我遇到了同样的问题,为了解决这个问题,我使用了树摇动方法: