如何使用图表.js与反应钩子?

Question

我正在尝试使用钩子使用 React Js 制作仪表板，数据通常从 APi 中获取，但为了测试，我将硬值放在数组中。 我得到了网格，但没有考虑任何值。 我不知道我做错了什么，也想知道图表.js是否是最好的选择。

这是我得到的错误

index.js:1375 Warning: Failed prop type: Invalid prop `data` supplied to `ChartComponent`.
in ChartComponent (created by Bar)
in Bar (at ErrorChart.js:8)
in div (at ErrorChart.js:7)
in ErrorChart (at App.js:20)
in div (at App.js:18)
in App (at src/index.js:7)

import React, { useState, useEffect } from "react";
import ProgressBar from "./ActivityAlert/ErrorMonitoring/ProgressBar";
import ErrorRanking from "./ActivityChart/ErrorChart/ErrorChart";
import ErrorChart from "./ActivityChart/ErrorChart/ErrorChart";
const App = () => {
const [percentage, setpercentage] = useState(1);
const [data, setData] = useState( [])
useEffect(() => {
setpercentage(80);
setData(["12","13","14"])
}, [setpercentage,setData]);
return (
<div>
{/* <ProgressBar percentage={percentage}  /> */}
<ErrorChart data= {data} />
</div>
);
};
export default App;

import React  from "react";
import {Bar} from 'react-chartjs-2'
const ErrorChart = ({data}) =>{
return (
<div>
<Bar data={data}>
</Bar>
</div>
);
}
export default ErrorChart

我只想显示来自这个小数组的数据

Answer 1

数据结构无效。您需要传递一个必须具有labels键和datasets键的对象。

可以在文档中找到示例数据。

尝试传递此对象，而不是["12", "13", "14]：

{
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
}

工作演示：https://stackblitz.com/edit/react-cdmfuu