1

Quiero mostrar unos resultados mediante la librería JQuery-knob.js , los resultados los obtengo bien y dibujo el knob correctamente, el problema es que quiero que cambie de color en base al valor que reciba, y no me realiza el cambio de color si el valor es mayor, este es mi código:

$('.dial').knob({
'min':0,
'max':50,
'width':250,
'height': 250,
draw: function () {
     v=parseInt(document.getElementById('circle').value);
          //console.log(v);
          if (v <=6 ) {
              this.o.fgColor='#59BD05';
              $("#circle").css("color", "#59BD05");
             
          }
          if (v > 6 ) {
              this.o.fgColor='#FE9D08';
              $("#circle").css("color", "#FE9D08");
              
          }
          if (v > 30 ) {
              this.o.fgColor='#F33A08';
              $("#circle").css("color", "#F33A08");
              
          }
        // $(this.i).val(this.cv + 'µg/m"<sup>3</sup>"') 
    },
    release: function (value) {
        
    }
});

Y aquí se puede apreciar como no me cambia el color de los knobs, y además tampoco me establece el color del valor numérico, los input son readonly, no quiero poder cambiar los datos solo mostrarlos mediante el knob ¿Cómo podría hacerlo? Gracias.

introducir la descripción de la imagen aquí

1 respuesta 1

1

El problema se debe a que no has definido la variable v.

Ejemplo:

$('.dial').knob({
  'min': 0,
  'max': 50,
  'width': 250,
  'height': 250,
  'draw': function() {
    let v = parseInt(this.i[0].value);
    if (v <= 6) this.o.fgColor = '#59BD05';
    else if (v <= 30) this.o.fgColor = '#FE9D08';
    else this.o.fgColor = '#F33A08';
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.13/jquery.knob.min.js" integrity="sha512-NhRZzPdzMOMf005Xmd4JonwPftz4Pe99mRVcFeRDcdCtfjv46zPIi/7ZKScbpHD/V0HB1Eb+ZWigMqw94VUVaw==" crossorigin="anonymous"></script>
<input type="text" value="5" class="dial">

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.