react-chartjs-2 具有不同数据集的多个图表

问题描述

情况：我从我的服务器获得多个数据集，每个数据集被加载到一个状态，然后分解成标签，分别带有键和值的数据。我有每个数据集的图表。 我可以确认正在检索数据。但是，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,data: reportTwovalue,backgroundColor: randoColour(reportTwovalue),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,text: 'DECISIONS MADE MONTHLY',position: 'right'
                                }
                            }}
                        />
                    </div>
                </div>
                <span></span>
            </div> 
        </>
    )
}

不知道从这里去哪里。任何帮助表示赞赏。谢谢。

解决方法

您可以使用多条形示例：https://reactchartjs.github.io/react-chartjs-2/#/multi

您使用 Scatter 组件，然后在您的代码中执行与 github 代码中所示相同的操作。