Estoy usando JQuery Knob para hacer algunos gráficos geniales y está funcionando perfectamente. Pero tengo un problema: quiero hacer que el número de visualización entre el gráfico tenga un símbolo '%' concatenado. pero no puedo hacer que funcione. Modificar la entrada a través de jquery no lo hará, y he intentado leer el código de la biblioteca pero sin suerte. ¿Alguien más ha tenido este problema antes?JQuery Cambio del número de pantalla del mando
Si echas un vistazo rápido al repositorio github verás que hay un gancho de extracción que se llama cada vez que se dibuja el lienzo. Si implementa ese gancho, debería poder agregar lo que desee a la entrada. He aquí un breve ejemplo de la funcionalidad que está buscando (a probarlo: http://jsfiddle.net/eAQA2/) y para futuras referencias:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="https://raw.github.com/aterrien/jQuery-Knob/master/js/jquery.knob.js"></script>
<script>
$(function() {
$(".dial").knob({
'draw' : function() {
$(this.i).val(this.cv + '%')
}
})
})
</script>
</head>
<body>
<input type="text" class="dial" data-min="0" data-max="100">
</body>
</html>
I conseguido esto con la animación también:
Mis soluciones hace esto mediante la adición el porcentaje cada vez que el valor se incrementó:
$(function() {
$('.dial_overall').each(function() {
var $this = $(this);
var myVal = $this.attr("value");
$this.knob({
});
$({
value: 0
}).animate({
value: myVal
}, {
duration: 1600,
easing: 'swing',
step: function() {
$this.val(Math.ceil(this.value)).trigger('change');
$('.dial_overall').val($('.dial_overall').val() + '%');
}
})
});
});
partir de la versión 1.2.7 ahora hay un gancho format para realizar tareas como esto:
$(".dial").knob({
'format' : function (value) {
return value + '%';
}
});
¿Podría mostrar lo que ha intentado? Beneficiará a cualquiera que intente ayudarlo. – Erik
Cambiando con JQuery el valor de la entrada que utilicé para el gráfico después de haber sido creado, agregando un '%' al final, pero eso no lo hizo. Tratando de cambiar el valor manualmente usando firebug para probar, pero eso tampoco funcionó. Abrí el código fuente de la perilla, pero funcionan con una gran cantidad de html5 que me falta conocimiento, intenté agregar '%' en algunos valores sin éxito ... –