Блог

Главная - Вопросы по программированию - Сопоставление с помощью наборов данных в chartjs

Сопоставление с помощью наборов данных в chartjs

#javascript #reactjs #chart.js #react-chartjs #react-chartjs-2

Вопрос:

У меня есть данные этого статического набора данных в диапазоне от 2015 до 2016 , и я хочу все отобразить, вместо того чтобы вручную добавлять полосы самостоятельно.

final_water_supply
Представление изображений данных

 var ctx = document.getElementById('mc').getContext('2d');

chartRef1 = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: sortedData,
                datasets: [{
                        label: '2015',
                        stack: 'Stack 1',
                        data: final_water_supply[0],
                        backgroundColor: '#D0D1E6',
                        borderColor: '#D0D1E6',
                    },
                    {
                        label: '2016',
                        stack: 'Stack 2',
                        data: final_water_supply[1],
                        backgroundColor: '#74A9CF',
                        borderColor: '#74A9CF',
                    },
                    {
                        label: '2017',
                        stack: 'Stack 3',
                        data: final_water_supply[2],
                        backgroundColor: '#0570B0',
                        borderColor: '#0570B0',
                    },
                    {
                        label: '2018',
                        stack: 'Stack 4',
                        data: final_water_supply[3],
                        backgroundColor: '#023858',
                        borderColor: '#023858',
                    }
                ]
            },

Комментарии:

1. Не могли бы вы, пожалуйста, отредактировать вопрос? Добавьте структуру final_water_supply и более подробно объясните, чего вам нужно достичь.

Ответ №1:

Так вот как я закончил тем, что сделал это

создана пустая структура объектов, которая принимает наборы данных

          let color = '#d6d6d6'
         let data = {
            labels:sortedData,
            datasets:[]
            }

создал forEach функцию, которая перебирает годы и вводит данные в наборы данных

           years.forEach(function(a,i) {
            switch(i) {
              case 0:
                color='#D0D1E6'
                break;
              case 1:
                color='#74A9CF'
                break;
              case 2:
                color='#0570B0'
                break;
              case 3:
                color='#023858'
                break;
              default:
                color='#d6d6d6'
            }
                data.datasets.push({
                label: a,
                stack: 'Stack ' i,
                data: final_water_supply[i],
                backgroundColor: color,
                borderColor: color,
              })
            })
Метки: