Я использую JQuery Knob, чтобы сделать несколько классных графиков, и он работает отлично. Но у меня есть одна проблема: я хочу, чтобы номер дисплея между графом ассоциировался с символом «%». но я просто не могу заставить его работать. Изменение ввода через jquery не сделает этого, и я попытался прочесть в коде библиотеки, но не повезло. У кого-нибудь еще была эта проблема раньше?
Если вы быстро просмотрите репозиторий github, вы увидите, что есть привлекательный крючок, который вызывается каждый раз, когда холст рисуется. Если вы реализуете этот крючок, вы должны иметь возможность добавлять все, что хотите. Вот краткий пример функциональности, которую вы ищете (чтобы попробовать: http://jsfiddle.net/eAQA2/ ) и для дальнейшего использования:
<!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> Начиная с версии 1.2.7 теперь есть format крючок для выполнения таких задач:
$(".dial").knob({ 'format' : function (value) { return value + '%'; } });
Мне тоже удалось добиться этого с помощью анимации:
Мои решения делают это, добавляя процент каждый раз, когда значение увеличивается:
$(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() + '%'); } }) }); });