Javascript 在数组中循环以呈现多个图表

我正在react中创建一个网络应用程序，显示基于经济、社会和政治指标的数据。由于数据太大，无法在一个图表上显示（对于移动用户界面来说是一场噩梦），我决定将数据拆分为一个数组中的4个对象。我正试图找到一种方法来循环通过那个数组。这是密码

import React from 'react';
import { Bar } from 'react-chartjs-2';
import ChartDataSource from 'chartjs-plugin-datasource';

const config = {
    data: {
        datasets: [
            {
                backgroundColor: 'rgba(255,99,132,0.2)',
                borderColor: 'rgba(255,99,132,1)',
                borderWidth: 1,
                hoverBackgroundColor: 'rgba(255,99,132,0.4)',
                hoverBorderColor: 'rgba(255,99,132,1)',
            },
        ],
    },

    options: {
        maintainAspectRatio: true,
        plugins: {
            datasource: {
                type: 'sheet',
                url: 'GDP1.xlsx', {/*<----- This is where the array gets looped*/}
                rowMapping: 'index',
            },
        },
        title: {
            display: true,
            text: 'GDP per country',
        },
        scales: {
            xAxes: [
                {
                    scaleLabel: {
                        display: true,
                        labelString: 'Countries',
                    },
                },
            ],
            yAxes: [
                {
                    id: '2018',
                    gridLines: {
                        drawOnChartArea: false,
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'GDP',
                    },
                },
            ],
        },
    },
};

function BarChart() {
    const graphslist = [ {/* Ths is the array i want to loop through*/}
        { url: 'GDP1.xlsx' },
        { url: 'GDP2.xlsx' },
        { url: 'GDP3.xlsx' },
        { url: 'GDP4.xlsx' },
    ];
    return (
        <div>
            <h2>GDP per country</h2>
            <Bar
                data={config.data}
                options={config.options}
                width={100}
                height={100}
                plugins={[ChartDataSource]}
            />
        </div>
    );
}

export default BarChart;

从“React”导入React；
从'react-chartjs-2'导入{Bar}；
从“chartjs插件数据源”导入ChartDataSource；
常量配置={
数据：{
数据集：[
{
背景颜色：“rgba（255,99132,0.2）”，
边框颜色：“rgba（255,99132,1）”，
边框宽度：1，
hoverBackgroundColor:'rgba（255,99132,0.4）'，
hoverBorderColor:'rgba（255,99132,1）'，
},
],
},
选项：{
维护Aspectratio：是的，
插件：{
数据源：{
键入：“工作表”，
url:'GDP1.xlsx'，{/*您可以在没有插件的情况下尝试这个

const theDatasets= (()=>{
let arr = []
      for (let i = 0; i < graphslist .length; i++) {

          arr.push(
            {
              data: graphslist [i],
              backgroundColor: 'rgba(255,99,132,0.2)',
            borderColor: 'rgba(255,99,132,1)',
            borderWidth: 1,
            hoverBackgroundColor: 'rgba(255,99,132,0.4)',
            hoverBorderColor: 'rgba(255,99,132,1)',
              label: graphslist [i],
                   
            }
          )
        }
      
      return arr
})()

const thedataset=（（）=>{
设arr=[]
for（设i=0；i

在渲染上

<Bar
                data={theDatasets}
                options={config.options} // your option without plugins
                width={100}
                height={100}
                
            />