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.