javascript - ReactJs 与 ChartJs 中的数据可视化

Question

我是reactjs新手。目前我正在开发一个应用程序，它使用 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;

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

我想像这样可视化数据

这是codeSandBox.io

Answer 1

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

https://codesandbox.io/s/react-chartjs-2-example-mzh9o

 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
    });
  };