reactjs - react 图表2 : giving me Cannot read properties of undefined (reading 'map' )

Question

我正在尝试在我的项目中使用 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;

我正在尝试创建条形图

Answer 1

您提供的数据有误。检查文档并遵循结构。这是文档 visit 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
  }]
};