Chartjs标签为forEach的堆积条形图

i7uq4tfw  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(198)

很抱歉，如果这个问题已经得到了解答，但是我不知道如何在我的for each中包含标签。我从Sping Boot 中获取名为“employees”的数据，“employees”数据中有20多个雇员。我循环访问并将雇员姓名添加到x轴，将personMonths添加到y轴。每个雇员都有一个项目，有时候一个雇员有不止一个项目。2我设法得到一个工作的堆积条形图。3 Spring/thymeleaf的数据看起来像这样，这是一个雇员有4个项目：

  1. const employees = [
  2.     {"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}]
  3.       },
  4.       {"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
  5.     },{"projectId":"87141502","projectName":"Project9","startDate":"10/22","endDate":"10/22","monthFrom":"1","monthTo":"10","personMonths":10.0,"employee":null,"empty":true}]
  6.     },
  7.       {"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
  8.     },                                                                                             {"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}]
  9.       },
  10.       {"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}]
  11.       },
  12.       {"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}]
  13.       },
  14.       {"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}]
  15.       },
  16.       {"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}]
  17.       },
  18.       {"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}]
  19.       },
  20.       {"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}]
  21.       },
  22.       {"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}]
  23.       },
  24.       {"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}]
  25.       },
  26.       {"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}]
  27.       },
  28.       {"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}]
  29.       },
  30.       {"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}]
  31.       },
  32.       {"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}]
  33.       },
  34.       {"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}]
  35.       },
  36.       {"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}]
  37.       },
  38.       {"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}]
  39.       },
  40.       {"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}]
  41.       },
  42.       {"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}]
  43.       },
  44.       {"name":"Colin","contractFrom":"","contractTo":"No date entered","projects":[]}
  45.     ];```
  47.     [Here is my graph][1]
  49.     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.
  50.     ```
  52.         var employeeData = [];
  53.             employees.forEach(function(empl){
  54.                 empl.projects.forEach(function(employeeProject) {
  55.                     var names = employeeProject.projectName;
  56.                 var employee = {x: empl.name, y: employeeProject.personMonths};
  57.                 employeeData.push(employee);
  59.                 })
  60.         })
  62.         const labelChart = 'Person Months'
  64.     // setup
  65.         const data = {
  66.     //      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  67.           datasets: [{
  68.             label: 'project months',
  69.             data: employeeData,
  70.             backgroundColor: 'rgba(235, 56, 56, 0.4)',
  71.             borderColor: 'rgba(255, 26, 104, 1)'
  72.           }]
  73.         };
  75.         // config
  76.         const config = {
  77.           type: 'bar',
  78.           data,
  79.           options: {
  80.             scales: {
  81.               y: {
  82.                 beginAtZero: true
  83.               }
  84.             },
  85.             plugins: {
  86.                 tooltip: {
  87.                     yAlign: 'bottom',
  88.                     titleMarginBottom: 0
  89.                 }
  90.             }
  91.           }
  92.         };
  94.         // render init block
  95.         const myChart = new Chart(
  96.           document.getElementById('myChart'),
  97.           config
  98.         );

Updated graph imageAnother Image with codepen data显示器

  1. {
  2.   name: 'John Smith', 
  3.   contractFrom: '01.3.2021',
  4.   contractTo: '01.3.2023',
  5.   projects: [{
  6.     projectId: '0001', 
  7.     projectName: 'project1', 
  8.     startDate: '9/22', 
  9.     endDate: '8/24', 
  10.     monthFrom: '9', 
  11.     monthTo: '12', 
  12.     personMonths: 1.0
  13.   }]
  14. }, {
  15.   name: 'Bob Kennedy', 
  16.   contractFrom: '01.3.2021',
  17.   contractTo: '01.3.2023',
  18.   projects: [{
  19.     projectId: '0001', 
  20.     projectName: 'project1', 
  21.     startDate: '9/22', 
  22.     endDate: '8/24', 
  23.     monthFrom: '9', 
  24.     monthTo: '12', 
  25.     personMonths: 2.0
  26.   }, {
  27.     projectId: '0002', 
  28.     projectName: 'Project 2', 
  29.     startDate: '10/22', 
  30.     endDate: '10/22', 
  31.     monthFrom: '3', 
  32.     monthTo: '8', 
  33.     personMonths: 3.0
  34.   }]
  35. }, {
  36.   name: 'Kevin Red', 
  37.   contractFrom: '01.3.2021',
  38.   contractTo: '01.3.2023',
  39.   projects: [{
  40.     projectId: '0001', 
  41.     projectName: 'project1', 
  42.     startDate: '9/22', 
  43.     endDate: '8/24', 
  44.     monthFrom: '9', 
  45.     monthTo: '12', 
  46.     personMonths: 4.0
  47.   }, {
  48.     projectId: '0002', 
  49.     projectName: 'Project 2', 
  50.     startDate: '10/22', 
  51.     endDate: '10/22', 
  52.     monthFrom: '3', 
  53.     monthTo: '8', 
  54.     personMonths: 5.0
  55.   }, {
  56.     projectId: '0003', 
  57.     projectName: 'Project 3', 
  58.     startDate: '12/22', 
  59.     endDate: '12/22', 
  60.     monthFrom: '10', 
  61.     monthTo: '12', 
  62.     personMonths: 6.0
  63.   }, {
  64.     projectId: '0004', 
  65.     projectName: 'Project 4', 
  66.     startDate: '12/22', 
  67.     endDate: '12/22', 
  68.     monthFrom: '10', 
  69.     monthTo: '12', 
  70.     personMonths: 7.0
  71.   }]
  72. },
  73.   {
  74.   name: 'James Brown', 
  75.   contractFrom: '01.3.2021',
  76.   contractTo: '01.3.2023',
  77.   projects: [{
  78.     projectId: '0001', 
  79.     projectName: 'project1', 
  80.     startDate: '9/22', 
  81.     endDate: '8/24', 
  82.     monthFrom: '9', 
  83.     monthTo: '12', 
  84.     personMonths: 8.0
  85.   }, {
  86.     projectId: '0002', 
  87.     projectName: 'Project 2', 
  88.     startDate: '10/22', 
  89.     endDate: '10/22', 
  90.     monthFrom: '3', 
  91.     monthTo: '8', 
  92.     personMonths: 9.0
  93.   }, {
  94.     projectId: '0003', 
  95.     projectName: 'Project 3', 
  96.     startDate: '12/22', 
  97.     endDate: '12/22', 
  98.     monthFrom: '10', 
  99.     monthTo: '12', 
  100.     personMonths: 10.0
  101.   }, {
  102.     projectId: '0004', 
  103.     projectName: 'Project 4', 
  104.     startDate: '12/22', 
  105.     endDate: '12/22', 
  106.     monthFrom: '10', 
  107.     monthTo: '12', 
  108.     personMonths: 11.0
  109.   }]
  110. }
  111. ];```
chart.js

1条答案

按热度按时间
tf7tbtn2

tf7tbtn21#

如果我理解得很好，我认为您可以为图表创建labels，以获取所有雇员的姓名。然后您可以提取所有数据集，以获取雇员的所有项目，将label设置为项目名称，将data设置为包含雇员所有人月的数组（在我的示例中，我只有4名雇员，因此data.length = 4）。
请参阅代码片段或代码段：https://codepen.io/stockinail/pen/BaxjwWM
第一个

赞(0）分享  回复(0）举报  2022-11-06
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com