如何在 Chart.js 和 React.js 中使用 Axios API

Question

我使用 Axios 和 useEffect 獲取數據，並想用 Chart.js 顯示它，但只有圖表框架顯示不數據。

下面是我的代碼

 import React, { useState, useEffect } from "react";
 import { Bar, Line } from "react-chartjs-2";
import axios from "axios";

function ChartSix() {

  const [data, setData] = useState([]);
  const [posts, setPosts] = useState([]);

  let title = [];
  let id = [];
  useEffect(() => {

    axios.get("https://jsonplaceholder.typicode.com/posts").then(res => {
      const ipl = res.data;
      setPosts(ipl);

      ipl.forEach(record => {
        title.push(record.title);
        id.push(record.id);
      });

      setData({
        Data: {
          labels: title,
          datasets: [
            {
              label: "IPL 2018/2019 Top Run Scorer",
              data: id,
              backgroundColor: [
                "#3cb371",
                "#0000FF",
                "#9966FF",
                "#4C4CFF",
                "#00FFFF",
                "#f990a7",
                "#aad2ed",
                "#FF00FF",
                "Blue",
                "Red"
              ]
            }
          ]
        }
      });
    });
  });

  return (
    <div>
      <Line data={data}></Line>
    </div>
  );
}

export default ChartSix;

Answer 1

適用於：

  return (
    <div>
      <Line data={data.Data} />
    </div>
  )

https://codesandbox.io/s/frosty-torvalds-qzwt3