在 Chart.JS 中读取地图和 ForwardRef 错误 - Javascript答案

【问题标题】：Reading map and ForwardRef error in Chart.JS - Javascript在 Chart.JS 中读取地图和 ForwardRef 错误 - Javascript
【发布时间】：2022-11-03 19:58:19
【问题描述】：

我正在尝试使用 chart.js 创建图表。我遵循了 chart.js 网站上的示例代码，并且能够让示例代码正常工作。我尝试修改代码以从创建图表的 javascript 文件外部处理图表的数据，然后通过图表参数提供数据。这样做，我得到以下控制台错误：

我有以下数据数据.js文件：

export const UserData = [
  {
    id: 1,
    year: 2018,
    users: 2000,
  },
  {
    id: 2,
    year: 2019,
    users: 2500,
  },
  {
    id: 3,
    year: 2020,
    users: 3000,
  }
]

我的代码中有以下代码应用程序.js文件：

import React from "react";
import { UserData } from './Components/data';
import { Graph } from "./Components/graph";

const data = {
  labels: UserData.map((data) => data.year),
  datasets: [{
    label: 'Revenue',
    data: UserData.map((data) => data.users),
    backgroundColor: ['#CCD4BF'],
    borderColor: [],
    borderWidth: 1
  }]
};

function App() {
  return <Graph graphData={data}/>
}

我的代码中有以下代码图.js文件：

import React from 'react';
import { Bar } from 'react-chartjs-2';
import {Chart as ChartJS,} from 'chart.js/auto'

export function Graph(graphData) {

  return <Bar data={graphData}/>

}

我的代码中是否缺少任何东西来解决“阅读地图”和“ForwardRef”错误？

【问题讨论】：

标签： javascript reactjs chart.js

【解决方案1】：

我有同样的问题，为了解决这个关于迁移到 react-chartjs-2@4 here 的阅读，这对我有帮助，我使用了 tree-shakable 方法：

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);

<Chart type='line' data={chartData} />

【讨论】：