如何使用带有react Hook的chart.js？

Question

我正在尝试使用挂钩通过React Js创建一个仪表板，这些数据通常是从APi获取的，但是为了测试，我将硬值放入了一个数组中。我得到了网格，但是没有考虑任何值。我不知道自己在做什么错，还想知道chart.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