所以我试着用ChartJS为我的NextJS应用程序添加图表。但是,我似乎在渲染它时遇到了问题。我也学习了其他教程和/或文章,但是似乎我得到了同样的错误。
我得到的错误是这样的:
Server Error
TypeError: Cannot read properties of null (reading 'useRef')
This error happened while generating the page. Any console logs will be displayed in the terminal window.
我不知道为什么我会得到这个错误,因为我没有在我的代码中使用useRef
挂钩。
下面是我的root/pages/admin/home.js
代码
import Head from 'next/head'
import Image from 'next/image'
import LineGraph from '../../components/admin/line'
export default function Home() {
return (
<div className="container">
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<LineGraph />
</main>
</div>
)
}
下面是我的LineGraph root/components/admin/line.js
代码
import React, { useRef } from 'react';
import { Line } from 'react-chartjs-2';
import Chart from 'chart.js/auto';
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
fill: false,
lineTension: 0.1,
backgroundColor: 'rgba(75,192,192,0.4)',
borderColor: 'rgba(75,192,192,1)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
const LineGraph = () => {
return (
<canvas>
<h2>Line Example</h2>
<Line
id="lineChart"
data={data}
width={400}
height={400}
/>
</canvas>
);
}
export default LineGraph;
PS:如果这个问题是重复的,请删除链接,我会给予它一个尝试。非常感谢你们的帮助伙计。
2条答案
按热度按时间fcy6dtqo1#
首先,由于您没有使用
useRef
,因此可以删除导入。如果您将HTML放在
canvas
元素中,则代码可能会失败,这不是您应该做的事情。React-chartjs会自动为你创建canvas标签。
cgh8pdjw2#
所以,我想通了。这和包的版本有关。在我的
package.json
文件中,我有以下依赖项:为了使它工作,我必须手动安装
chart.js
和react-chartjs-2
的特定版本。所以,我的图形最终工作,我的package.json
看起来像这样: