我尝试在项目中使用react-chartjs-2
创建图表,但遇到以下错误:
TypeError: Cannot read properties of undefined (reading 'map')
setDatasets
C:/Users/vivek/code/src/utils.ts:46
43 | currentData: ChartData<TType, TData, TLabel>,
44 | nextDatasets: ChartDataset<TType, TData>[]
45 | ) {
> 46 | currentData.datasets = nextDatasets.map(nextDataset => {
47 | // given the new set, find it's current match
48 | const currentDataset = currentData.datasets.find(
49 | dataset =>
这是我的代码:
import React from "react";
import { Bar } from "react-chartjs-2";
const BarChart = () => {
return (
<div>
<Bar
data={{
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
}}
width={600}
height={400}
options={{ maintainAspectRatio: false }}
/>
</div>
);
};
export default BarChart;
我正在尝试创建条形图
5条答案
按热度按时间6pp0gazn1#
也许这对某人会有帮助?
我遇到了完全相同的错误以上,我的版本如下:
"图表. js":"^3.6.2","React":"^17.0.2","React图表-2":"^4.0.0",
这里的关键实际上是文档,[https://react-chartjs-2.netlify.app/docs/migration-to-v4][1]具体来说,在我的案例中,大约在页面的中间部分是"v4-Line组件"部分。
下面是一个代码的例子,我得到的工作后,审查上述文档,(和撞墙我的头几个小时!!)。
注意,从获取返回的json看起来像:
kognpnkq2#
您在提供数据时出错。请检查文档并遵循结构。以下是来自文档visit here的示例
bvjxkvbb3#
至关重要,这解决了我的问题
yvgpqqbh4#
我是React的新手,这种方法对我很有效。
1.导入"chart.js/auto"文件;
1.从"react-chartjs-2"导入{Line};
1.常量[图表数据,设置图表数据]=**使用状态({数据集:[]});
ioekq8ef5#
我遇到了同样的问题。我的组件看起来像这样:
在我改变之后
那个错误就消失了。