图表 Js 不显示动态传递的数据值

问题描述

我正在尝试使用 react 和 chart js 创建电晕病毒跟踪器。我已经从 API 中获取了确认、恢复和死亡的数量，并使用 useState 将它们存储到状态变量中。然后我将状态变量用作图表 js 数据属性的数组。但是图表的条形没有显示。就像数据属性的值没有正确设置。看看我的代码。

const [confirmedpeople,setconfirmedpeople] = useState('')
const [recoveredpeople,setrecoveredpeople] = useState('')
const [deathspeople,setdeathspeople] = useState('')

const url= `https://covid19.mathdro.id/api`;
const fetchData= async()=>{
try {
const datas= await axios.get(url)
setconfirmedpeople(datas.data.confirmed.value)
setrecoveredpeople(datas.data.recovered.value)
setdeathspeople(datas.data.recovered.value)
} catch (error) {
console.log(error)
}
}
useEffect(() => {
fetchData()
},[])


return (
<>
<Bar
data= {{
labels:['confirmed','recovered','deaths'],datasets: [{
label: 'CORONA UPDATE',data: [{confirmedpeople},{recoveredpeople},{deathspeople}],/>

解决方法

对于如此大量的数据，条形图可能不是理想的图表类型。我宁愿选择折线图或提供过滤功能，让用户选择他感兴趣的区域。

不过，如果您真的想要使用条形图，请查看此 StackBlitz，它说明了如何使用您提供的 URL 来完成。

据我所知，react-chartjs-2 仍然使用 Chart.js v2。因此，您必须参考文档中的 this page 以了解如何定义图表 data 和 options。

可能您还想让图表水平滚动。在这种情况下，此 answer 可能会有所帮助。