gpt4 book ai didi

javascript - 如何将 Axios API 与 Chart.js 和 React.js 结合使用

转载 作者:行者123 更新时间:2023-12-02 21:38:30 25 4
gpt4 key购买 nike

我使用 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;

enter image description here

最佳答案

适用于:

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

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

关于javascript - 如何将 Axios API 与 Chart.js 和 React.js 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60433572/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com