很抱歉，如果这个问题已经得到了解答，但是我不知道如何在我的for each中包含标签。我从Sping Boot 中获取名为“employees”的数据，“employees”数据中有20多个雇员。我循环访问并将雇员姓名添加到x轴，将personMonths添加到y轴。每个雇员都有一个项目，有时候一个雇员有不止一个项目。2我设法得到一个工作的堆积条形图。3 Spring/thymeleaf的数据看起来像这样，这是一个雇员有4个项目：
const employees = [
{"name":"Nat","contractFrom":"01.4.2022","contractTo":"01.3.2025","projects":[{"projectId":"13415000","projectName":"Project1","startDate":null,"endDate":null,"monthFrom":"4","monthTo":"12","personMonths":9.0,"employee":null,"empty":false}]
},
{"name":"Kate","contractFrom":"01.7.2021","contractTo":"No date entered","projects":[{"projectId":"13415000","projectName":"Project1","startDate":null,"endDate":null,"monthFrom":"11","monthTo":"12","personMonths":2.0,"employee":null,"empty":false
},{"projectId":"87141502","projectName":"Project9","startDate":"10/22","endDate":"10/22","monthFrom":"1","monthTo":"10","personMonths":10.0,"employee":null,"empty":true}]
},
{"name":"Adam","contractFrom":"15.07.2021","contractTo":"14.07.2024","projects":[{"projectId":"13415000","projectName":"Project1","startDate":null,"endDate":null,"monthFrom":"10","monthTo":"12","personMonths":3.0,"employee":null,"empty":false
}, {"projectId":"87141502","projectName":"Project9","startDate":"10/22","endDate":"10/22","monthFrom":"9","monthTo":"9","personMonths":1.0,"employee":null,"empty":true},{"projectId":"61241516","projectName":"Project12","startDate":"05/22","endDate":"04/25","monthFrom":"10","monthTo":"12","personMonths":3.0,"employee":null,"empty":true},{"projectId":"61241510","projectName":"Project16","startDate":"10/19","endDate":"09/22","monthFrom":"1","monthTo":"8","personMonths":8.0,"employee":null,"empty":true}]
},
{"name":"Dan","contractFrom":"01.8.2021","contractTo":"01.7.2024","projects":[{"projectId":"13415000","projectName":"Project1","startDate":null,"endDate":null,"monthFrom":"10","monthTo":"12","personMonths":3.0,"employee":null,"empty":false},{"projectId":"61241513","projectName":"Project8","startDate":"01/22","endDate":"03/23","monthFrom":"5","monthTo":"12","personMonths":8.0,"employee":null,"empty":true},{"projectId":"61241510","projectName":"Project16","startDate":"10/19","endDate":"09/22","monthFrom":"6","monthTo":"9","personMonths":4.0,"employee":null,"empty":true}]
},
{"name":"John","contractFrom":"01.3.2022","contractTo":"01.4.2025","projects":[{"projectId":"13415000","projectName":"Project1","startDate":null,"endDate":null,"monthFrom":"8","monthTo":"12","personMonths":5.0,"employee":null,"empty":false},{"projectId":"61241515","projectName":"Project13","startDate":"09/22","endDate":"08/25","monthFrom":"9","monthTo":"12","personMonths":4.0,"employee":null,"empty":true},{"projectId":"61241510","projectName":"Project16","startDate":"10/19","endDate":"09/22","monthFrom":"3","monthTo":"8","personMonths":6.0,"employee":null,"empty":true}]
},
{"name":"Frank","contractFrom":"01.6.2022","contractTo":"01.7.2025","projects":[{"projectId":"13415000","projectName":"Project1","startDate":null,"endDate":null,"monthFrom":"10","monthTo":"12","personMonths":3.0,"employee":null,"empty":false},{"projectId":"61241513","projectName":"Project8","startDate":"01/22","endDate":"03/23","monthFrom":"6","monthTo":"9","personMonths":4.0,"employee":null,"empty":true},{"projectId":"612415","projectName":"Project21","startDate":"08/21","endDate":"07/25","monthFrom":"10","monthTo":"12","personMonths":3.0,"employee":null,"empty":true}]
},
{"name":"Mic","contractFrom":"","contractTo":"No date entered","projects":[{"projectId":"13415000","projectName":"Project1","startDate":null,"endDate":null,"monthFrom":"1","monthTo":"3","personMonths":1.5,"employee":null,"empty":false},{"projectId":"61741501","projectName":"Project4","startDate":"10/21","endDate":"09/22","monthFrom":"1","monthTo":"9","personMonths":4.5,"employee":null,"empty":true},{"projectId":"61641502","projectName":"Project5","startDate":"04/22","endDate":"09/22","monthFrom":"4","monthTo":"9","personMonths":3.0,"employee":null,"empty":true}]
},
{"name":"Michael","contractFrom":"01.11.2021","contractTo":"01.10.2024","projects":[{"projectId":"61241513","projectName":"Project8","startDate":"01/22","endDate":"03/23","monthFrom":"10","monthTo":"12","personMonths":3.0,"employee":null,"empty":true}]
},
{"name":"Mia","contractFrom":"01.5.2022","contractTo":"01.10.2023","projects":[{"projectId":"13415000","projectName":"Project1","startDate":null,"endDate":null,"monthFrom":"5","monthTo":"12","personMonths":8.0,"employee":null,"empty":false}]
},
{"name":"Wendy","contractFrom":"15.11.2021","contractTo":"14.11.2024","projects":[{"projectId":"61341508","projectName":"Project3","startDate":"01/22","endDate":"12/24","monthFrom":"1","monthTo":"12","personMonths":12.0,"employee":null,"empty":true}]
},
{"name":"Rina","contractFrom":"15.09.2021","contractTo":"01.5.2022","projects":[{"projectId":"61141504","projectName":"Project11","startDate":"12/22","endDate":"12/22","monthFrom":"1","monthTo":"5","personMonths":5.0,"employee":null,"empty":true}]
},
{"name":"Luke","contractFrom":"15.01.2022","contractTo":"15.04.2023","projects":[{"projectId":"61241512","projectName":"Project6","startDate":"01/22","endDate":"03/23","monthFrom":"0","monthTo":"12","personMonths":11.5,"employee":null,"empty":true}]
},
{"name":"Harry","contractFrom":"01.12.2020","contractTo":"01.5.2025","projects":[{"projectId":"61241514","projectName":"Project7","startDate":"01/22","endDate":"03/23","monthFrom":"1","monthTo":"12","personMonths":12.0,"employee":null,"empty":true}]
},
{"name":"Bill","contractFrom":"01.4.2021","contractTo":"01.3.2025","projects":[{"projectId":"61241509","projectName":"Project17","startDate":"10/20","endDate":"09/23","monthFrom":"1","monthTo":"12","personMonths":12.0,"employee":null,"empty":true}]
},
{"name":"Zane","contractFrom":"01.4.2021","contractTo":"01.3.2025","projects":[{"projectId":"87441507","projectName":"Project14","startDate":"10/22","endDate":" 04/2024","monthFrom":"11","monthTo":"12","personMonths":2.0,"employee":null,"empty":true},{"projectId":"61341507","projectName":"Project15","startDate":"01/19","endDate":"06/22?","monthFrom":"1","monthTo":"4","personMonths":4.0,"employee":null,"empty":true},{"projectId":"61241510","projectName":"Project16","startDate":"10/19","endDate":"09/22","monthFrom":"5","monthTo":"9","personMonths":5.0,"employee":null,"empty":true},{"projectId":"61241509","projectName":"Project17","startDate":"10/20","endDate":"09/23","monthFrom":"10","monthTo":"10","personMonths":1.0,"employee":null,"empty":true},{"projectId":"61241510","projectName":"Project18","startDate":"03/21","endDate":"10/23","monthFrom":"3","monthTo":"4","personMonths":2.0,"employee":null,"empty":true}]
},
{"name":"Barry","contractFrom":"01.3.2021","contractTo":"01.3.2023","projects":[{"projectId":"13415000","projectName":"Project1","startDate":null,"endDate":null,"monthFrom":"9","monthTo":"12","personMonths":4.0,"employee":null,"empty":false}, {"projectId":"87141503","projectName":"Project10","startDate":"10/22","endDate":"10/22","monthFrom":"3","monthTo":"8","personMonths":6.0,"employee":null,"empty":true},{"projectId":"61141504","projectName":"Project11","startDate":"12/22","endDate":"12/22","monthFrom":"7.0","monthTo":"12","personMonths":6.0,"employee":null,"empty":false}]
},
{"name":"Nigel","contractFrom":"15.04.2021","contractTo":"01.4.2022","projects":[{"projectId":"61241510","projectName":"Project18","startDate":"03/21","endDate":"10/23","monthFrom":"1","monthTo":"4","personMonths":4.0,"employee":null,"empty":true}]
},
{"name":"Tony","contractFrom":"01.10.2021","contractTo":"01.9.2024","projects":[{"projectId":"61141504","projectName":"Project11","startDate":"12/22","endDate":"12/22","monthFrom":"8","monthTo":"9","personMonths":2.0,"employee":null,"empty":true}, {"projectId":"61241511","projectName":"Project20","startDate":"06/21","endDate":"05/25","monthFrom":"1","monthTo":"10.0","personMonths":10.0,"employee":null,"empty":false}]
},
{"name":"Ross","contractFrom":"15.12.2021","contractTo":"15.12.2024","projects":[{"projectId":"87141506","projectName":"Project19","startDate":"03/21","endDate":"02/25","monthFrom":"1","monthTo":"12","personMonths":12.0,"employee":null,"empty":true}]
},
{"name":"Ray","contractFrom":"15.06.2022","contractTo":"01.10.2023","projects":[{"projectId":"61241510","projectName":"Project18","startDate":"03/21","endDate":"10/23","monthFrom":"5","monthTo":"12","personMonths":8.0,"employee":null,"empty":true}]
},
{"name":"Colin","contractFrom":"","contractTo":"No date entered","projects":[]}
];```
[Here is my graph][1]
What Im after is to have the project names above where the 'project months' is hard coded at the top. Also if possible different colours for different projects. Here is my code, please help, many thanks.
```
var employeeData = [];
employees.forEach(function(empl){
empl.projects.forEach(function(employeeProject) {
var names = employeeProject.projectName;
var employee = {x: empl.name, y: employeeProject.personMonths};
employeeData.push(employee);
})
})
const labelChart = 'Person Months'
// setup
const data = {
// labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [{
label: 'project months',
data: employeeData,
backgroundColor: 'rgba(235, 56, 56, 0.4)',
borderColor: 'rgba(255, 26, 104, 1)'
}]
};
// config
const config = {
type: 'bar',
data,
options: {
scales: {
y: {
beginAtZero: true
}
},
plugins: {
tooltip: {
yAlign: 'bottom',
titleMarginBottom: 0
}
}
}
};
// render init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);Updated graph imageAnother Image with codepen data显示器
{
name: 'John Smith',
contractFrom: '01.3.2021',
contractTo: '01.3.2023',
projects: [{
projectId: '0001',
projectName: 'project1',
startDate: '9/22',
endDate: '8/24',
monthFrom: '9',
monthTo: '12',
personMonths: 1.0
}]
}, {
name: 'Bob Kennedy',
contractFrom: '01.3.2021',
contractTo: '01.3.2023',
projects: [{
projectId: '0001',
projectName: 'project1',
startDate: '9/22',
endDate: '8/24',
monthFrom: '9',
monthTo: '12',
personMonths: 2.0
}, {
projectId: '0002',
projectName: 'Project 2',
startDate: '10/22',
endDate: '10/22',
monthFrom: '3',
monthTo: '8',
personMonths: 3.0
}]
}, {
name: 'Kevin Red',
contractFrom: '01.3.2021',
contractTo: '01.3.2023',
projects: [{
projectId: '0001',
projectName: 'project1',
startDate: '9/22',
endDate: '8/24',
monthFrom: '9',
monthTo: '12',
personMonths: 4.0
}, {
projectId: '0002',
projectName: 'Project 2',
startDate: '10/22',
endDate: '10/22',
monthFrom: '3',
monthTo: '8',
personMonths: 5.0
}, {
projectId: '0003',
projectName: 'Project 3',
startDate: '12/22',
endDate: '12/22',
monthFrom: '10',
monthTo: '12',
personMonths: 6.0
}, {
projectId: '0004',
projectName: 'Project 4',
startDate: '12/22',
endDate: '12/22',
monthFrom: '10',
monthTo: '12',
personMonths: 7.0
}]
},
{
name: 'James Brown',
contractFrom: '01.3.2021',
contractTo: '01.3.2023',
projects: [{
projectId: '0001',
projectName: 'project1',
startDate: '9/22',
endDate: '8/24',
monthFrom: '9',
monthTo: '12',
personMonths: 8.0
}, {
projectId: '0002',
projectName: 'Project 2',
startDate: '10/22',
endDate: '10/22',
monthFrom: '3',
monthTo: '8',
personMonths: 9.0
}, {
projectId: '0003',
projectName: 'Project 3',
startDate: '12/22',
endDate: '12/22',
monthFrom: '10',
monthTo: '12',
personMonths: 10.0
}, {
projectId: '0004',
projectName: 'Project 4',
startDate: '12/22',
endDate: '12/22',
monthFrom: '10',
monthTo: '12',
personMonths: 11.0
}]
}
];```
1条答案
按热度按时间tf7tbtn21#
如果我理解得很好，我认为您可以为图表创建
labels，以获取所有雇员的姓名。然后您可以提取所有数据集，以获取雇员的所有项目，将label设置为项目名称，将data设置为包含雇员所有人月的数组（在我的示例中，我只有4名雇员，因此data.length = 4）。请参阅代码片段或代码段：https://codepen.io/stockinail/pen/BaxjwWM
第一个