通过 chartjs 中的数据集进行映射

Question

我有这个静态数据集的数据，范围从 2015 到 2016，我想映射所有内容而不是自己手动添加条。

final_water_supply Data image representation

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',
                    }
                ]
            },

Answer 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,
              })
            })