Estoy consumiendo un JSON para realizar un grafico con Chartjs de tipo barras de estilo stacked, los atributos de JSON los estoy tratando de transformar en los ejes una matriz, y después alimentar el grafico con esa matriz, pero los datos que refleja la matriz no están siendo fieles a la información entregada por el JSON
El Json que consumo es de este estilo:
[
{
"parte": "Soket Bolt 5x7",
"defecto": "Razguño ligero",
"total": 3
},
{
"parte": "BRKT LNG",
"defecto": "Sin recubrimiento",
"total": 2
},
{
"parte": "BRKT L Console",
"defecto": "Roto",
"total": 2
},
{
"parte": "BRKT R Console",
"defecto": "Pegamento con contaminación",
"total": 2
},
{
"parte": "DrainBoxL",
"defecto": "Fuera de especificación",
"total": 1
},
{
"parte": "Cushion Fr Frame",
"defecto": "Sin collar",
"total": 1
},
{
"parte": "Cushion Fr Frame",
"defecto": "Otros",
"total": 1
},
{
"parte": "BRKT Sunshade",
"defecto": "Roto",
"total": 1
},
{
"parte": "BRKT Sunshade",
"defecto": "Rayado",
"total": 1
},
{
"parte": "BRKT R Side",
"defecto": "Aplicación de primer NG",
"total": 1
},
{
"parte": "BRKT R Console",
"defecto": "Sin recubrimiento",
"total": 1
},
{
"parte": "BRKT R Console",
"defecto": "Sin pegamento",
"total": 1
},
{
"parte": "BRKT R Console",
"defecto": "Mal ensamblado",
"total": 1
},
{
"parte": "Blade Deflector",
"defecto": "Deforme",
"total": 1
},
{
"parte": "BRKT LNG",
"defecto": "Sin incerto metalico",
"total": 1
}
]
En 2 arreglos diferentes, obtengo las partes y defectos sin repetirse:
let partes = [];
let defectos = [];
topcorrection.forEach(e => { if (!partes.includes(e.parte)) { partes.push(e.parte); } });
topcorrection.forEach(e => { if (!defectos.includes(e.defecto)) { defectos.push(e.defecto) } });
Definí otro arreglo datamatrix
para almacenar los valores de total en forma de matriz, para hacerlo utilice 3 ciclos
let datamatrix = [];
for (let i = 0; i < defectos.length; i++)
{
let datamatrix_x = [];
for (let j = 0; j < partes.length; j++) {
for (let z = 0; z < topcorrection.length; z++)
{
if (((defectos[i] === topcorrection[z].defecto) && (partes[j] === topcorrection[z].parte)))
{
datamatrix_x.push(topcorrection[z].total);
}
}
datamatrix_x.push(0);
}
datamatrix.push(datamatrix_x);
}
Pero la salida que estoy esperando es esta:
La salida que obtengo es esta
Para poder graficar con Chartjs este grafico:
Los datos de la matriz resultante no son los mismos que la matriz esperada, no alcanzo a ver porque sale una columna 9 y una columna 10. O si hay otra forma de dejarle la tarea a chart