0

Tengo el siguiente problema, estoy pasando unos valores que recojo en inputs y los paso a un array, para después pasarselo al objeto que le pasaré a series. El problema es el siguiente solo me muestra el último objeto ya que no itera. He intentado de todo, pero no lo consigo, el código de la api viene de la siguente manera por defecto:

series: [44, 55, 41, 17, 15];
chartOptions: {
  labels: ["Apple", "Mango", "Orange", "Watermelon"];
}

Yo quiero pasarle a series un array o un objeto, pero no se me ocurre como, mi código es así:

function graficoPorcentajes() {
  baseDeDatos = [2489, 1256, 700];
  let series = {};
  let claves;

  for (var i = 0; i < baseDeDatos.length; i++) {
    series = { precio: baseDeDatos[i] };
    claves = Object.values(series); // Muestra los valores numericos me voy apilando en el array (revisado en consola)

    var options = {
      series: [claves], // solo me muestra el último valor

      chart: {
        width: "100%",
        type: "pie",
      },
      labels: ["Credito", "Comida", "Facturas"], // cuando solucione los valores numericos mostrare aqui los conceptos
      theme: {
        monochrome: {
          enabled: true,
        },
      },
      plotOptions: {
        pie: {
          dataLabels: {
            offset: -5,
          },
        },
      },
      title: {
        text: "GRAFICO DE GASTOS",
      },
      dataLabels: {
        formatter(val, opts) {
          const name = opts.w.globals.labels[opts.seriesIndex];
          return [name, val.toFixed(1) + "%"];
        },
      },
      legend: {
        show: false,
      },
    };
  }
  return options;
}

Tengo poca experiencia con JS, pido disculpas si no he sido lo suficiente claro. Os dejo el link de este grafico:

Enlace

5
  • porque no agregas el parametro 'basededatos' que recibis en la funcion? asi los demas pueden reproducir tu error. Ademas a 'series' le falta una llave de cierre. Saludos. el 8 ene. a las 19:55
  • Ya lo modifique, el parametro base de datos podría ser perfectamente eso que pongo,, aunque la longitud puede cambiar, por eso quiero que se reproduzca mi array en series. el 8 ene. a las 20:04
  • Tu for si que itera bien, lo que estás haciendo es reescribiendo constantemente el objeto options dentro del for y después lo devuelves, pero va a devolver 1 solo (el ultimo), tu for recorre el array normalmente. el 8 ene. a las 22:12
  • Como puedo evitar que se sobrescriba el objeto, no se me ocurre.... el 8 ene. a las 22:34
  • Ahi te mando la respuesta, si te sirve marcala como util. el 8 ene. a las 22:53

2 respuestas 2

0

Así podes preservar los options, declarando un arreglo fuera del for y haciendo un push del options con cada iteración, para que una vez fuera del for devuelvas ese array:

function graficoPorcentajes() {
  baseDeDatos = [2489, 1256, 700];
  let series = {};
  let claves;
  let optionsArray = [] // array que preservara los options
  for (let i = 0; i < baseDeDatos.length; i++) {
    series = { precio: baseDeDatos[i] };
    claves = Object.values(series); 
    let options = {
      series: [claves], 
      chart: { width: "100%", type: "pie"},
      labels: ["Credito", "Comida", "Facturas"], 
      theme: { monochrome: { enabled: true } },
      plotOptions: { pie: { dataLabels: { offset: -5 } } },
      title: { text: "GRAFICO DE GASTOS" },
      dataLabels: {
        formatter(val, opts) {
          const name = opts.w.globals.labels[opts.seriesIndex];
          return [name, val.toFixed(1) + "%"];
        },
      },
      legend: { show: false }
    };
    optionsArray.push(options) // agregamos el option al array con cada iteracion, con esto tendras una lista con los options
  }
  return optionsArray; // devolves la lista
}

let alloptions = graficoPorcentajes(); // alloptions contendra la lista de option 
console.log(alloptions) // la imprimimos y comprobamos
2
  • Hola, ante de nada darte las gracias por tu tiempo, ahora me copia las mismas veces que posición tiene el array de base de datos pero siempre con el último valor :s el 9 ene. a las 9:56
  • Te referis a la propiedad series de los options? yo abro la propiedad en la consola y cada options tiene un valor distino, que son los valores de base de datos. Podes especificar lo que necesitas? modificare el codigo pero no entiendo bien lo que esta mal :) el 9 ene. a las 10:12
0

después de horas intentándolo he conseguido la solución, doy las gracias a infiniteLoop por su tiempo. No especificaba bien el array en series dado que recogía los valores como un objeto, en el siguiente código se ve como ha quedado:

function graficoPorcentajes(baseDeDatos){
let array = [];
console.log(baseDeDatos)// recojo los valores de esta forma : 0: Object { id: 1, concepto: "weee", precio: "1111" }
 
for (let i = 0; i < baseDeDatos.length; i++) {
 array.push(parseInt(baseDeDatos[i].precio))
 
} 
  var options = {
                  series:  array ,//se muestra de este modo ["","",""]
                  chart: { width: '100%', type: 'pie',},
                   
                  labels: ['Credito','Comida'],// cuando solucione los valores numericos mostrare aqui los conceptos
                  theme: {
                  monochrome: { enabled: true}},
                 
                  plotOptions: {
                  pie: {
                      dataLabels: { offset: -5 }
                  }},
                  title: { text: "GRAFICO DE GASTOS" },
                  dataLabels: {
                  formatter(val, opts) {
                      const name = opts.w.globals.labels[opts.seriesIndex]
                      return [name, val.toFixed(1) + '%']
                  }
                  },legend: { show: false }};
                  return options;
                            

}

Espero que esto ayude a alguien en un futuro.

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.