Javascript 在对象数组上迭代并堆叠图表JS栏？

我从后端获得了以下json对象，我希望使用chart JS将其填充到堆叠图表中

[
    {
        "user": {
            "username": "erik",
            "first_name": "erik",
            "email": "erik@admin.com"
        },
        "hours": {
            "day_1": 13.0,
            "day_2": 14.0,
            "day_3": 9.0,
            "day_4": 8.0,
            "day_5": 8.0,
            "day_6": 3.0,
            "day_7": null
        },
        "project": 21,
        "year": 2020,
        "week": 37
    },
    {
        "user": {
            "username": "mega",
            "first_name": "boy",
            "email": "mega@boy.com"
        },
        "hours": {
            "day_1": 5.0,
            "day_2": 10.0,
            "day_3": 8.0,
            "day_4": 8.0,
            "day_5": null,
            "day_6": null,
            "day_7": null
        },
        "project": 21,
        "year": 2020,
        "week": 37
    }
]

在图表JS中，我的

.data.label

被手动添加为

[“Mon”，“Tues”，“Wed”…，“Sun”]

，它对应于每一天-现在我只需要用正确的值正确填充每一天

关于如何迭代此数据集并填充图表JS'

…data.datasets[N].data

部分的任何特定提示，如下所示：

            timesheetChartData: {
                type: 'bar',
                data: {
                    labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun'],
                    datasets: [ 
                        { 
                            label: 'Weekly Summary',
                            data: [], // array of what I assume will be stacked bars?
                            backgroundColor: "#2ecc71",
                            borderWidth: 1
                        },
                    ]
                },
                options: {
                    responsive: true,
                    lineTension: 1,
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                padding: 25,
                            }
                        }],
                    }
                }
            },

---

如果后端数据存在于名为

baseData

的数组中，则可以使用和方法生成

数据集，如下所示：

const colors = ['green', 'red'];
const datasets = baseData.map((o, i) => ({
  label: o.user.username,
  data: Object.values(o.hours),
  backgroundColor: colors[i]
}));

请查看下面您的修订代码：


const baseData=[{
“用户”：{
“用户名”：“埃里克”，
“名字”：“埃里克”，
“电子邮件”：erik@admin.com"
},
“小时数”：{
“第一天”：13.0，
“第二天”：14.0，
“第三天”：9.0，
“第四天”：8.0，
“第五天”：8.0，
“第六天”：3.0，
“第7天”：空
},
“项目”：21，
“年份”：2020年，
“一周”：37
},
{
“用户”：{
“用户名”：“mega”，
“名字”：“男孩”，
“电子邮件”：mega@boy.com"
},
“小时数”：{
“第一天”：5.0，
“第二天”：10.0，
“第三天”：8.0，
“第四天”：8.0，
“第五天”：空，
“第六天”：空，
“第7天”：空
},
“项目”：21，
“年份”：2020年，
“一周”：37
}
];
常量颜色=['绿色'，'红色']；
常量数据集=baseData.map（（o，i）=>({
标签：o.user.username，
数据：对象值（o.hours），
背景颜色：颜色[i]
}));
新图表（'画布'{
类型：'bar'，
数据：{
标签：[“周一”、“周二”、“周三”、“周四”、“周五”、“周六”、“周日”]，
数据集：数据集
},
选项：{
回答：是的，
标题：{
显示：对，
文字：“每周摘要”
},
比例：{
雅克斯：[{
对,，
滴答声：{
贝吉纳泽罗：是的
}
}],
xAxes：[{
是的
}]
}
}
});