Блог

Я создаю веб-приложение в 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;
  

Я пытался использовать функцию .map, поэтому config.options.Плагины.url перебирает 4 объекта в массиве, поэтому отображаются 4 диаграммы, но я продолжаю получать неожиданный токен. Любая помощь приветствуется

вы можете попробовать это без плагинов.

 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
})()
  

при рендеринге

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