JQuery Knob display number change
Question
I'm using JQuery Knob to make some cool graphs and it's working perfectly. But I have one problem: I want to make the display number between the graph have a '%' symbol concatenated. but I just cant seem to make it work. Modifying the input through jquery wont do it, and I've tried reading into the code of the library but with no luck. Has any one else had this problem before?
3 answers
solution1
30 ACCPTED 2012-09-24 05:44:46
If you take a quick look at the github repo you'll see that there's a draw hook that's called everytime the canvas is drawn. If you implement that hook you should be able to add whatever you wish to the input. Here's a short example of the functionality you're looking for (to try it: http://jsfiddle.net/eAQA2/ ) and for future reference:
<!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>
solution2
5 2014-06-20 17:36:18
As of version 1.2.7 there is now a format hook for performing tasks like this:
$(".dial").knob({
'format' : function (value) {
return value + '%';
}
});
solution3
2 2013-10-14 13:18:46
I managed to achieve this with animation too:
My solutions does this by adding the percentage each time the value gets increased:
$(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() + '%');
}
})
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.