情况:我从我的服务器获取多个数据集,每个数据集被加载到一个状态,然后分别分解为标签、带有键和值的数据。我有每个数据集的图表。我可以确认正在检索数据。但是,react-chartjs-2 只会加载一个图表,而其他所有图表都是空的。
一个星期以来,我一直在努力解决这个问题。我已经阅读了文档,查看了示例,通过查看类似问题尝试了各种方法/解决方案,但到目前为止没有任何效果。
//==================// Load data //==================//
const reportOneData = {
labels: reportOneKeys,
datasets: [
{
label:'DAYS IN REVIEW STAGE',
data: reportOneValue,
backgroundColor: randoColour(reportOneValue),
borderWidth: 1,
borderColor: '#ccc',
hoverBorderWidth: 3,
hoverBorderColor: '#333',
hoverOpacity: 1
}
]
}
const reportTwoData = {
labels: reportTwoKeys,
datasets: [
{
label:'DAYS IN REVIEW STAGE',
data: reportTwoValue,
backgroundColor: randoColour(reportTwoValue),
borderWidth: 1,
borderColor: '#ccc',
hoverBorderWidth: 3,
hoverBorderColor: '#333',
hoverOpacity: 1
}
]
}
//==================// Render charts //==================//
return (
<>
<div className="reports-container">
<h1>Reports by region</h1>
<h2>{regionName}</h2>
<button className="print-button" onClick={() => window.print()}>Print this page</button>
<div className="container">
<div className="chart">
<Bar
data={reportOneData}
options={{
responsive: true,
maintainAspectRatio: false,
title:{
display:true,
text: 'NUMBER OF DAYS IN STAGE',
fontSize: '30'
},
legend: {
display: true,
position: 'right'
}
}}
/>
</div>
<div className="chart">
<Line
data={reportTwoData}
options={{
responsive: true,
maintainAspectRatio: false,
title:{
display:true,
text: 'DECISIONS MADE MONTHLY',
fontSize: '30'
},
legend: {
display: true,
position: 'right'
}
}}
/>
</div>
</div>
<span></span>
</div>
</>
)
}
不知道从这里去哪里。任何帮助表示赞赏。谢谢你。