2

estoy generando gráficos de tipo gauge con la librería Kgauge, el problema que tengo es el siguiente:

Tengo un método que se llama colorGauge(valor) que es el siguiente:

colorGauge(value){
    if(value <= 70){
        return 'red'
    }else if(value <= 90 && value > 70){
            return 'orange'
    }else if(value > 90){
        return 'green'
    }
}, 

Me sirve cuando genero dinámicamente los colores para el gráfico:

Declaro esto en data:

data() {
   return {
       valoresAxios: []
   }
}

En mi template:

 <div v-for"valores of valoresAxios" :key="valoresAxios.id">
    <div v-for="dat of valores" :key="dat.id">
        <k-gauge :width="300" :height="70" 
                :value="`${dat.valorActual*100/dat.falorFinal}`" 
                :max="100" :gauge-size="0.7"
                :color-steps="[colorGauge(`${dat.valorActual*100/dat.falorFinal}`)]"
                :shadow-opacity="0"
                :pointer="true"
                :value-font-style="'font-size:30px; font-weight: bold; font-family: Arial'" 
        />
    </div>
  </div>

Lo que pasa aquí es que cuando los valores de valoresAxios la función colorGauge deja de funcionar, solo se queda en el color inicial.

2
  • En lugar de esa función puedes usar operador ternario. el 4 ago. 2019 a las 2:33
  • Intenté, pero no me salió como esperaba... el 4 ago. 2019 a las 3:01

1 respuesta 1

3

Deberias usar una propiedad computada en vez de un metodo, como el componente que estas usando esta dentro de un v-for tenes que crear un componente auxiliar para que puedas pasarle los datos que necesitas y crear las propiedades computadas dentro de dicho componente

<div v-for"valores of valoresAxios" :key="valoresAxios.id">
  <div v-for="dat of valores" :key="dat.id">
    <mi-grafica :datos="dat" />
  </div>
</div>

Luego en el componente <mi-grafica />

template

<template>
  <k-gauge 
    :width="300"
    :height="70" 
    :value="valor"
    :max="100"
    :gauge-size="0.7"
    :color-steps="color"
    :shadow-opacity="0"
    :pointer="true"
    :value-font-style="'font-size:30px; font-weight: bold; font-family: Arial'" 
  />
</template>

script

{
   props: ['datos'],

   computed: {
      valor() {
        return this.datos.valorActual * 100 / this.datos.valorFinal; // asumo que habia un error en el nombre de la variable porque se llamaba `falorFinal`
      },
      color() {
         if(this.valor <= 70) {
           return ['red']
         } else if(this.valor <= 90 && this.valor > 70) {
           return ['orange']
         } else if(this.valor > 90) {
           return ['green']
         }
      }
   }
}
7
  • 1
    Me podrías dar un pequeño ejemplo, ya que existe un v-for. el 4 ago. 2019 a las 3:16
  • Me ayudas con un pequeño ejemplo, soy novato en vue. el 4 ago. 2019 a las 3:42
  • Pero que hago con k-gauge, ya que lo instalé desde npm. :/ el 4 ago. 2019 a las 3:53
  • me referia a que crees un componente para poder pasarle los datos de forma individual en cada iteracion, dentro de ese componente poses usar k-gauge y no vas a tener el problema de que este dentro de un v-for, se entiende ahora? el 4 ago. 2019 a las 3:55
  • @MatiasVerdier por favor si agregarás un ejemplo a tu respuesta, edita la misma y ahí escribelo pues será difícil para otros saber que deben revisar la zona de comentarios
    – BetaM
    el 4 ago. 2019 a las 3:57

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.