反应图表2：给我 无法读取未定义的属性(读取"地图")

也许这对某人有帮助？

我遇到了与上面完全相同的错误，我的版本如下：

"chart.js"："3.6.2">
"反应"："17.0.2〃
"react-chatjs-2"："4.0.0〃；，

这里的关键实际上是文档，迁移到v4特别是在我的情况下；v4-线分量"；大约在页面的一半。

下面是我在查看了上面提到的文档后开始工作的代码示例(我的头撞在墙上好几个小时！！(。

import React, { useState, useEffect }  from "react";
import 'chart.js/auto';
import { Chart } from 'react-chartjs-2';
import { Chart as ChartJS, LineController, LineElement, PointElement, LinearScale, Title } from 'chart.js';
ChartJS.register(LineController, LineElement, PointElement, LinearScale, Title);

function Graph() {    
useEffect(() => {
const fetchSamplings = async () => {
const res = await fetch("http://192.168.1.100:8080/consumer/v1/sampling/sensor/esp_planter_1/humidity/interval/24")
const data = await res.json();

setChartData({
labels: data.map((sampling) => sampling.samplingDate),
datasets: [{
label: "Humidity",
data: data.map((sampling) => sampling.humidity)                    
}]
});
}
fetchSamplings();        
}, [])
const [chartData, setChartData] = useState({
datasets: [],
});
return(
<div style={{height: "1024px", width: "2048px"}}>
<Chart type='line' data={chartData} />
</div>
)
}
export default Graph;

注意，从fetch返回的JSON看起来像：

[
{
samplingDate: "2021-12-22T02:50:35.393+00:00",
sensor: "esp_planter_1",
humidity: 51.5
},
{
samplingDate: "2021-12-22T02:49:34.874+00:00",
sensor: "esp_planter_1",
humidity: 53.2
},
{
samplingDate: "2021-12-22T02:48:34.867+00:00",
sensor: "esp_planter_1",
humidity: 52.4
}
]

您在提供数据时出错。检查文档并遵循结构。以下是文档访问的示例

const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [{
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(201, 203, 207, 0.2)'
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)'
],
borderWidth: 1
}]
};

import { useEffect, useState } from "react";
import "chart.js/auto";                                         /////
import { Line } from "react-chartjs-2";                         /////
const WeekMonthWeather = (props) => {
const { latitude, longitude } = props;
const [chartData, setChartData] = useState({ datasets: [] }); /////
const fetchData = async () => {
try {
const response = await fetch(
`https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&hourly=temperature_2m`
);
const data = await response.json();
if (data && data.hourly) {
// check if data.hourly is defined
console.log(data);
const temperatures = data.hourly.temperature_2m;
console.log(temperatures);
const labels = data.hourly.time;
console.log(labels);
setChartData({
labels: labels,
datasets: [
{
label: "Temperature",
data: temperatures,
backgroundColor: "rgba(75,192,192,0.2)",
borderColor: "rgba(75,192,192,1)",
borderWidth: 1,
},
],
});
}
} catch (error) {
console.error(error);
}
};
useEffect(() => {
fetchData();
}, [latitude, longitude]);
return (
<div style={{ height: "512px", width: "1024px" }}>
<h2>Weather Chart</h2>
<Line data={chartData} />
</div>
);
};
export default WeekMonthWeather;

我是reactjs的新手，这种方法对我很有效。

1. import "chart.js/auto";
2. import { Line } from "react-chartjs-2";
3. const [chartData, setChartData] = useState({ datasets: [] });

我遇到了同样的问题。我的组件看起来像这样：

<Doughnut
datasetIdKey='id'
data={setChartData}
options={options}
/>

在我更换之后

data={chartData}

那个错误已经过去了。