React Js和Chart Js(折线图)

Question

我正在尝试从react组件中的chart js添加折线图。我已经尝试了以下代码，但它显示白色屏幕，没有错误。我不明白自己做错了什么。我浏览了chart.js文档，感到很困惑。请给我如何显示图表的建议。我使用的是react-chattjs-2版本4.0.0和chart.js版本3.7.0。

import React from "react";
import {Line} from 'react-chartjs-2';
const data = {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [
{
label: 'Rainfall',
fill: false,
lineTension: 0.5,
backgroundColor: 'rgba(75,192,192,1)',
borderColor: 'rgba(0,0,0,1)',
borderWidth: 2,
data: [65, 59, 80, 81, 56]
}
]
}
const config = {
type: 'line',
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Line Chart'
}
}
},
};
const SavingsChart = () => {
return (
<Line
data={data}
options={config}
/>
);
};
export default SavingsChart;

Answer 1

您应该从chart.js注册图表

请参阅此处的示例

import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
} from 'chart.js';
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);

Answer 2

您可以尝试在文件的开头添加这一行，它似乎可以解决这个问题：import Chart from "chart.js/auto";

Answer 3

您可以用render()方法创建图表。

render() {
return (
<Line 
data={this.state.data}
options={this.state.options}
/>
);
}

请查看以下StackBlitz，并了解它如何与您修改后的代码配合使用。