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. Commented el 4 ago. 2019 a las 2:33
  • Intenté, pero no me salió como esperaba... Commented 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. Commented el 4 ago. 2019 a las 3:16
  • Me ayudas con un pequeño ejemplo, soy novato en vue. Commented el 4 ago. 2019 a las 3:42
  • Pero que hago con k-gauge, ya que lo instalé desde npm. :/ Commented 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? Commented 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
    – user128299
    Commented el 4 ago. 2019 a las 3:57

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.