0

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:

introducir la descripción de la imagen aquí

La salida que obtengo es esta

introducir la descripción de la imagen aquí

Para poder graficar con Chartjs este grafico:

introducir la descripción de la imagen aquí

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

2 respuestas 2

1

Para generar esa matriz tienes que hacer algo como esto:

class Defecto {
    constructor(nombre,partes) {
        this.nombre = nombre;
        for (let p of partes) {
            this[p] = 0;
        }
    }
    add(parte, valor) {
        this[parte] += valor;
    }
}
const Partes = Array.from(new Set(lista.map(x => x.parte)));
const MATRIX = []
for (let item of lista) {
    let d = new Defecto(item.defecto, Partes);
    d.add(item.parte, item.total);
    MATRIX.push(d);
}
console.table(MATRIX);

introducir la descripción de la imagen aquí

Pero a mí me parece que quieres otra cosa, que es un array de array, entonces debería ser:

const lista=[
    {
        "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
    }
];

//Lista de partes no repetidas
const Partes = Array.from(new Set(lista.map(x => x.parte)));

let MATRIX = []
for (let item of lista) {
    let parts = [];
    for(let p of Partes){
      if(p == item.parte){
        parts.push(item.total);
      }
      else{
        parts.push(0);
      }
    }
    MATRIX.push(parts);
}

console.log(MATRIX);

Según lo que veo de tus datos es que la combinación defectos y partes es única. Así que la idea general es obtener la lista de partes, luego recorrer la lista de los daatos. A cada sublista se le agrega cero si el parte no corresponde (una especie de fill), caso contrario se agrega el valor correspondiente

0

aunque lo mio no es ni por asomo como la respuesta de Yussef ( felicidades ) te dejo mi granito aqui. Espero que te sirva , Saludos ! Cualquier mejora o distinto punto de vista no duden.

       let datamatrix = [];
       let a=[]
       let total=[]
       defectos.forEach(e=>{
       let datamatrix_x = [];
          for (let i = 0; i < partes.length; i++){
          let num=0
          let bol=false
          topcorrection.forEach(x=>{
          num++
          if(x.defecto===e && x.parte===partes[i]){
            datamatrix_x.push(x.total)
             bol=true
            }
         })
      if (num==topcorrection.length && bol!=true){
          datamatrix_x.push(0)
         }
      }
       a.push(datamatrix_x)

         })     
    'Summing vertically'    
      const b = a.reduce((a, b) => a.map((v, i) => v + b[i]));
       a.push(b)

ejemplo

2
  • Pulsa en editar y describe en qué consiste tu granito de arena. Una respuesta es mucho más útil cuando contiene explicación: puede que para ti sea obvio cómo funciona, pero para otros que lleguen a tener un problema similar, no. Lee Cómo responder y haz el recorrido de bienvenida para conocer el funcionamiento del sitio.
    – padaleiana
    Commented el 21 nov. 2022 a las 11:35
  • si , tienes razón. Gracias Commented el 21 nov. 2022 a las 16:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.