react-chart2：无法读取未定义的属性（读取‘map’）
2021-12-11
2811
我正在尝试使用 react-chartjs-2 创建条形图，但收到错误： 无法读取未定义的属性（读取“map”）。 这是我第一次尝试创建图表，我想知道我应该写些什么，是什么导致了这个错误。
import React, {useEffect} from 'react'
import styled from 'styled-components';
import {Bar} from 'react-chartjs-2';
const ChartDaily = ({dailyPrices, chartData, setChartData}) => {
const Chart = () => {
setChartData({
labels: ['Open', 'High', 'Low', 'Close', 'Volume'],
datasets: [{
label: 'price',
data : [1, 100, 1000, 10000],
backgroundColor: [
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
],
borderColor: [
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
],
borderWidth:1
}]
})
}
useEffect(() => {
Chart();
}, [])
return (
<StyledChart>
<h3>Daily Prices</h3>
<Bar
data={chartData}
options={{
responsive:true,
title: { text: "Daily Chart", display: true },
scales:{
yAxes:{
ticks:{
beginAtZero: true
}
}
}
}}
/>
</StyledChart>
)
}
1个回答
将您的代码与此工作示例进行比较，看看哪里出了问题。
import React from 'react';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';
import faker from 'faker';
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);
export const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: 'Chart.js Bar Chart',
},
},
};
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
export const data = {
labels,
datasets: [
{
label: 'Dataset 1',
data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })),
backgroundColor: 'rgba(255, 99, 132, 0.5)',
},
{
label: 'Dataset 2',
data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })),
backgroundColor: 'rgba(53, 162, 235, 0.5)',
},
],
};
export function App() {
return <Bar options={options} data={data} />;
}
请注意，react-chartjs-2 的所有示例都是用 Typescript 编写的，因此如果您使用的是 jsx 而不是 tsx 文件，您可能需要查看这个问题：
MertHaddad
2021-12-11