2

我正在尝试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;

我正在尝试创建条形图

4

3 回答 3

2

你提供数据有误。检查文档并遵循结构。这是来自文档访问的示例here

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
  }]
};

于 2021-11-10T18:05:32.503 回答
2

也许这对某人有帮助？

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

“chart.js”：“^3.6.2”，“react”：“^17.0.2”，“react-chartjs-2”：“^4.0.0”，

这里的关键实际上是文档，[https://react-chartjs-2.netlify.app/docs/migration-to-v4][1] 特别是在我的情况下，它大致是“v4 - Line component”部分页面的一半。

这是我在查看上述文档后开始工作的代码示例（并将我的头撞到墙上好几个小时！！）。

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
    }
]

Hope this helpful!!

  [1]: https://react-chartjs-2.netlify.app/docs/migration-to-v4
于 2021-12-22T02:59:47.127 回答
0 
import {Chart as ChartJS} from 'chart.js/auto'

是必不可少的，这解决了我的问题

于 2022-02-02T20:06:09.330 回答