1

Cómo puedo pasar estos datos para que puedan ser graficados

[
  {
    "Ncantidad": 7,
    "categoria_id": 3,
    "categoria": {
      "id": 3,
      "nombre": "test3"
    }
  },
  {
    "Ncantidad": 5,
    "categoria_id": 2,
    "categoria": {
      "id": 2,
      "nombre": "test2"
    }
  }
]

Necesito pasarle de manera dinamica segun la cantidad de elementos donde dice series : Data, tengo que pasarle el valor de la variable Ncantidad Y donde dice categories pasar el nombre del categoría.

export default {

    components: {
      apexcharts: VueApexCharts,
    },
    props:['graficar'],
    data: function() {
      return {
        chartOptions: {
          chart: {
            id: 'vuechart-example'
          },
          xaxis: {

            	categories: [1182, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
          }
        },
        series: [{
          name: 'preguntas',
          data: [54, 40, 45, 50, 49, 60, 70, 91]

        }]
      }
    },
};

he intentado como dije antes, pasarle una variable directa,pero no funciona.

1 respuesta 1

1

En tu pregunta no explicas de donde sale el array de datos, así que voy a suponer que se lo pasas al componente mediante props (en graficar).

Por otro lado, dado que dices que

donde dice series : Data, tengo que pasarle el valor de la variable Ncantidad Y donde dice categories pasar el nombre del categoría.

entiendo que quieres llegar a que chartOptions sea

chartOptions: {
      chart: {
        id: 'vuechart-example'
      },
      xaxis: {

            categories: ['test3', 'test2']
      }
    },
    series: [{
      name: 'preguntas',
      data: [7, 5]

    }]

En ese caso, chartOptions no debiese estar en data sino que debiera ser computed

export default {

  components: {
    apexcharts: VueApexCharts,
  },
  props: ['graficar'],

  computed: {

    chartOptions() {
      return {
        chart: {
          id: 'vuechart-example'
        },
        xaxis: {

          categories: this.graficar.map((item)=>{
            return item.categoria.nombre
          })
        }
      },
      series: [{
        name: 'preguntas',
        data: this.graficar.map((item)=>{
            return item.Ncantidad;
          })

      }]
    }
  }
};
2
  • Igual intente meterlo en cumputed. pero no me deja, Pero de igual forma hice lo que pusiste y ahora Todo funciona. Solo una pregunta. ¿cómo se llama este tipo de recorrido o que dato es? categories: this.graficar.map((item)=>{ return item.categoria.nombre }) para que busque más acerca. el 3 nov. 2018 a las 18:51
  • 1
    El método map es nativo de cualquier array. Es lo mismo que haber puesto this.graficar.map(function(item) { return item.categoria.nombre }); developer.mozilla.org/es/docs/Web/JavaScript/Referencia/… En Vue el objeto this siempre es el componente mismo, y puedes acceder a sus propiedades, data, computed properties y métodos indistintamente
    – ffflabs
    el 3 nov. 2018 a las 19:08

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.