如何将 chart.js 与 React Hook 一起使用？

Question

我正在尝试使用通常从 APi 获取数据的钩子使用 React Js 制作仪表板，但为了测试我将硬值放入数组中。 我得到了网格，但没有考虑任何值。 我不知道自己做错了什么，也想知道 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键的 object。

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

而不是["12", "13", "14] ，尝试传递这个 object：

{
        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