Javascript ReactJs与ChartJs的数据可视化

我是新来的。目前，我正在开发一个应用程序，使用chartjs将json COVID-19 api数据显示为可视化。我昨天试过这个，但是我不能显示视觉数据

这是我的密码

App Component

import React, { useState, useEffect } from "react";
import axios from "axios";

import Chart from "./Chart";

const App = () => {
  const [state, setState] = useState({});
  const [loading, setLoading] = useState(true);
  const [chart, setChart] = useState({});

  useEffect(() => {
    getData("italy");
    setChart({
      labels: ["Cases", "Deaths", "Recovered"],
      datasets: [
        {
          label: "cases",
          data: [state.cases]
        },
        {
          label: "deaths",
          data: [state.deaths]
        },
        {
          label: "recovered",
          data: [state.recovered]
        }
      ]
    });
  }, []);

  const getData = async country => {
    try {
      const res = await axios.get(
        `https://corona.lmao.ninja/v2/historical/${country}`
      );
      setLoading(false);
      setState(res.data.timeline);
    } catch (error) {
      console.log(error.response);
    }
  };

  return (
    <div>
      {!loading
        ? console.log(
            "cases",
            state.cases,
            "deaths",
            state.deaths,
            "recovered",
            state.recovered
          )
        : null}

      {!loading ? <Chart chart={chart} /> : "loading failed"}
    </div>
  );
};

export default App;

And Here is Chart Component

import React from "react";

import { Line } from "react-chartjs-2";

const Chart = ({chart}) => {

  return (
    <div>
      <Line
        data={chart}
        height={300}
        width={200}
        options={{
          maintainAspectRatio: false,
          title: {
            display: true,
            text: "Covid-19",
            fontSize: 25
          },
          legend: {
            display: true,
            position: "top"
          }
        }}
      />
    </div>
  );
};

export default Chart;

如果我打开浏览器和开发工具，它看起来像这样

我想把数据可视化成这样

---

这里是

看起来像数据集中的数据属性只接受数字数组。我已经使用基于类的组件简化了您的代码。它将帮助你开始

---

你的沙箱没有响应。介意在这里创建一个吗

 setChartData = () => {
    let { data } = this.state;
    let chartData = {
      labels: ["Cases", "Deaths", "Recovered"],
      datasets: [
        {
          label: "cases",
          data: Object.values(data.cases)
        },
        {
          label: "deaths",
          data: Object.values(data.deaths)
        },
        {
          label: "recovered",
          data: Object.values(data.recovered)
        }
      ]
    };
    this.setState({
      chart: chartData
    });
  };