时间戳

首页 > 解决方案 > 如何对数组进行分组并制作表格以在图表中显示？

javascript - 如何对数组进行分组并制作表格以在图表中显示？

问题描述

我正在尝试创建一个数组以显示在图表中，

这是我的数据：

[
  { Cantidad: 2, Mesint: 4, DepartmentName: 'CALIDAD' },
  { Cantidad: 1, Mesint: 5, DepartmentName: 'CALIDAD' },
  { Cantidad: 2, Mesint: 3, DepartmentName: 'GERENCIA' },
  { Cantidad: 1, Mesint: 4, DepartmentName: 'MATERIALES' },
  { Cantidad: 1, Mesint: 6, DepartmentName: 'MATERIALES' },
  { Cantidad: 9, Mesint: 1, DepartmentName: 'PRODUCCION' },
  { Cantidad: 23, Mesint: 2, DepartmentName: 'PRODUCCION' },
  { Cantidad: 6, Mesint: 3, DepartmentName: 'PRODUCCION' },
  { Cantidad: 22, Mesint: 4, DepartmentName: 'PRODUCCION' },
  { Cantidad: 16, Mesint: 5, DepartmentName: 'PRODUCCION' },
  { Cantidad: 4, Mesint: 6, DepartmentName: 'PRODUCCION' },
  { Cantidad: 3, Mesint: 3, DepartmentName: 'PRUEBA ELECTRICA' },
  { Cantidad: 2, Mesint: 4, DepartmentName: 'PRUEBA ELECTRICA' },
  { Cantidad: 1, Mesint: 5, DepartmentName: 'PRUEBA ELECTRICA' },
  { Cantidad: 1, Mesint: 6, DepartmentName: 'PRUEBA ELECTRICA' },
  { Cantidad: 1, Mesint: 6, DepartmentName: 'TI' },
];

并且需要这个组形式：输出

[
  { name: 'CALIDAD', data: [0, 0, 0, 2, 1, 0, 0, 0, 0, 0, 0, 0] },
  { name: 'GERENCIA', data: [0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
  { name: 'MATERIALES', data: [0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0] },
  { name: 'PRODUCCION', data: [9, 23, 6, 22, 16, 4, 0, 0, 0, 0, 0, 0] },
  { name: 'PRUEBA ELECTRICA', data: [0, 0, 3, 2, 1, 1, 0, 0, 0, 0, 0, 0] },
  { name: 'TI', data: [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0] },
];

进入前组形式的数组是一个带有 Mesint 的“Cantidad”过滤器的数组，这是对一年的 mounths 的引用。所以当“head”（例如：“Calidad”）没有值时，我需要输入 0。

我正在尝试使用 map() 进行分组，但我无法在月份推送带有 count (Value/"Cantidad") 的数组。

标签： javascriptarrays

解决方案

首先，请注意您所描述的预期输出无效，对象应由key/value对组成。但是，您可以生成一个对象，其中keys是DepartmentName's并且值是月份的Cantidad数组12：

{
  "CALIDAD": [0,0,0,2,1,0,0,0,0,0,0,0],
  "GERENCIA": [0,0,2,0,0,0,0,0,0,0,0,0],
  "MATERIALES": [0,0,0,1,0,1,0,0,0,0,0,0],
  "PRODUCCION": [9,23,6,22,16,4,0,0,0,0,0,0],
  "PRUEBA ELECTRICA": [0,0,3,2,1,1,0,0,0,0,0,0],
  "TI": [0,0,0,0,0,1,0,0,0,0,0,0]
}

该输出将类似于您期望的输出，并且可以使用Array.reduce()来实现，如下一个示例所示：

const input = [
  {Cantidad: 2, Mesint: 4, DepartmentName: "CALIDAD"},
  {Cantidad: 1, Mesint: 5, DepartmentName: "CALIDAD"},
  {Cantidad: 2, Mesint: 3, DepartmentName: "GERENCIA"},
  {Cantidad: 1, Mesint: 4, DepartmentName: "MATERIALES"},
  {Cantidad: 1, Mesint: 6, DepartmentName: "MATERIALES"},
  {Cantidad: 9, Mesint: 1, DepartmentName: "PRODUCCION"},
  {Cantidad: 23, Mesint: 2, DepartmentName: "PRODUCCION"},
  {Cantidad: 6, Mesint: 3, DepartmentName: "PRODUCCION"},
  {Cantidad: 22, Mesint: 4, DepartmentName: "PRODUCCION"},
  {Cantidad: 16, Mesint: 5, DepartmentName: "PRODUCCION"},
  {Cantidad: 4, Mesint: 6, DepartmentName: "PRODUCCION"},
  {Cantidad: 3, Mesint: 3, DepartmentName: "PRUEBA ELECTRICA"},
  {Cantidad: 2, Mesint: 4, DepartmentName: "PRUEBA ELECTRICA"},
  {Cantidad: 1, Mesint: 5, DepartmentName: "PRUEBA ELECTRICA"},
  {Cantidad: 1, Mesint: 6, DepartmentName: "PRUEBA ELECTRICA"},
  {Cantidad: 1, Mesint: 6, DepartmentName: "TI"}
];

let res = input.reduce((acc, {Cantidad, Mesint, DepartmentName}) =>
{
    acc[DepartmentName] = acc[DepartmentName] || [0,0,0,0,0,0,0,0,0,0,0,0];
    acc[DepartmentName][Mesint - 1] = Cantidad;
    return acc;
}, {});

console.log(res);
.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

如果生成的输出不符合您的目标，您可以使用该示例作为指导并根据您的需要进行调整。例如，如果你想要类似下一个：

[
  {name: "CALIDAD", data: [0,0,0,2,1,0,0,0,0,0,0,0]},
  {name: "GERENCIA", data: [0,0,2,0,0,0,0,0,0,0,0,0]},
  {name: "MATERIALES", data: [0,0,0,1,0,1,0,0,0,0,0,0]},
  {name: "PRODUCCION", data: [9,23,6,22,16,4,0,0,0,0,0,0]},
  {name: "PRUEBA ELECTRICA", data: [0,0,3,2,1,1,0,0,0,0,0,0]},
  {name: "TI", data: [0,0,0,0,0,1,0,0,0,0,0,0]}
]

然后，您可以在.reduce()方法之后使用下一个代码

res = Object.entries(res).map(([name, data]) => ({name, data}));

推荐阅读