3

Me encuentro haciendo gráficas en chart js, y necesito generar los datasets dinamicamente dependiendo del tamaño de un arreglo. Dicho arreglo contiene los valores de las label que se asignarán al dataset, y para asignar los valores del data del dataset tengo otro arreglo con sus valores (ambos arreglos tienen la misma longitud). Lo que me gustaría hacer es que cada vez que se genera un dataset se le asignara a "label" y "data" el valor de la posición de cada arraglo respectivamente. Es decir algo asi:

 lAux = ["Enc1","Enc2","Enc3","Enc4", "Enc5", "Enc6"];

 dAux = [
  array(12, 33, 12, 34, 21),
  array(21, 42, 45, 21, 32),
  array(22, 31, 33, 12, 41), 
  array(14, 33, 13, 34, 42),
  array(12, 12, 23, 23, 10),
  array(11, 11, 22, 22, 20) 
 ];

 dataSetAux = {
  label: lAux[0], //Aqui en la primer iteracion label tendra el valor de la primer posicion de "lAux" y en la siguiente el valor de la segunda posicion y asi sucesivamente
  borderColor: colorAleatorio(),
  pointRadius: 0,
  pointHitRadius: 30,
  fill: false,
  data: dAux[0], //Aqui en la primer iteracion data tendra el valor de la primer posicion de "dAux" y en la siguiente el valor de la segunda posicion y asi sucesivamente
}

Hasta ahora he hecho un ciclo forEach que recorre el arreglo de las etiquetas(lAux) y asigna el valor de la posición del arreglo a "label", y dentro de ese forEach hice otro forEach pero ahora recorriendo el arreglo de los datos (dAux) y asigna el valor de la posición del arreglo a "data"

lAux.forEach(function(item,index,array){
  dAux.forEach(function(element,pos,set){

    return valores = dAux[pos];

  });
  dataSetAux = {
    label: lAux[index],
    borderColor: colorAleatorio(),
    pointRadius: 0,
    pointHitRadius: 30,
    fill: false,
    data: dAux[pos],
  }
  arrDataSets.push(dataSetAux); //Se inserta cada dataset generado en un arreglo
});

El ciclo funciona bien genera 6 datasets, las etiquetas se asignan bien, el problema es que en data siempre se asigna el valor de la ultima posición del arreglo de dAux, como se muestra:

  data: (5) [11, 11, 22, 22, 20]
  fill: false
  label: "Enc3"
  pointHitRadius: 30
  pointRadius: 0

  data: (5) [11, 11, 22, 22, 20]
  fill: false
  label: "Enc4"
  pointHitRadius: 30
  pointRadius: 0  

  data: (5) [11, 11, 22, 22, 20]
  fill: false
  label: "Enc5"
  pointHitRadius: 30
  pointRadius: 0

  data: (5) [11, 11, 22, 22, 20]
  fill: false
  label: "Enc6"
  pointHitRadius: 30
  pointRadius: 0

Les agradezco cualquier sugerencia de como arreglarlo u otra alternativa para hacer esto, y disculpen tanto contenido en la pregunta pero quise ser lo mas especifico posible

2 respuestas 2

2

No necesitas dos forEach anidados, puedes hacerlo con uno solo asi:

lAux = ["Enc1","Enc2","Enc3","Enc4", "Enc5", "Enc6"];

dAux = [
  [12, 33, 12, 34, 21],
  [21, 42, 45, 21, 32],
  [22, 31, 33, 12, 41], 
  [14, 33, 13, 34, 42],
  [12, 12, 23, 23, 10],
  [11, 11, 22, 22, 20] 
 ];
 colors = ['#fc0000', '#ff832c', '#50ed7d', '#e4d354', '#2b908f', '#f45b5b'];
 arrDataSets = [];
lAux.forEach(function(item, i) {
  dataSetAux = {
    label: lAux[i],
    borderColor: colors[i],
    backgroundColor: colors[i],
    pointRadius: 0,
    pointHitRadius: 30,
    fill: false,
    data: dAux[i],
  }
  arrDataSets.push(dataSetAux); 
});

var canvas = $('.canvas');
var ctx = canvas[0].getContext("2d");

var chart = new Chart(ctx, {
	  type: 'bar',
	  data: {
	    datasets: arrDataSets			    
	  }
});
        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.css">

<canvas class="canvas"></canvas>

4
  • Muchas gracias @alanfcm es justo lo que necesito, marco tu respuesta, por último podrías explicarme por que el forEach se comporta de esa manera?
    – Robert_Rmz
    el 22 abr. 2019 a las 16:53
  • La variable i guarda el numero de cada iteracion. En este caso, como los dos arrays tienen el mismo nuemero de elementos y cada elemento concuerda con la informacion del otro, puedes utiliar el mismo indice para crear el nuevo array de datasets que necesitas.
    – alanfcm
    el 22 abr. 2019 a las 17:05
  • Ya veo entonces la variable "i" es la iteración propiamente del ciclo forEach y no del arreglo lAux y por eso también su iteración "afecta" a los arreglos dAux y colors
    – Robert_Rmz
    el 22 abr. 2019 a las 17:10
  • Correcto @Robert_Rmz
    – alanfcm
    el 22 abr. 2019 a las 17:12
0

No acabo de entender lo que intentas hacer, pero si entiendo claramente cual es tu problema: los foreach( ) no se pueden detener, siempre recorren el arreglo hasta el final. Esto

return valores = dAux[pos];

en realidad si asigna, pero no corta tu foreach: el return no sirve para nada dentro de un foreach.

Y ese es tu problema: asignas repetidamente a valores, y el último valor asignado es el que permanece: el último elemento de tu array dAux.

Puedes utilizar throw para lanzar una excepción y cortar el foreach (lo que implica cambios mas drásticos) ... o puedes usar un while( ) de toda la vida y cortarlo con un break.

2
  • Si entendiera lo que pretendes hacer, te daría una solución :-(
    – Trauma
    el 22 abr. 2019 a las 16:43
  • Gracias por responder, lo que intento hacer es que al dataset que genero se le asigne al valor de "label" y al valor de "data" el contenido de lAux y dAux respectivamente, es decir en la primera vez que se genera el dataset se asignará a estos valores la el contenido de la posición 1 de ambos arreglos.
    – Robert_Rmz
    el 22 abr. 2019 a las 16:50

Tu Respuesta

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

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