JQuery Knob display number change

后端未结

关注

 3  837

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

相关标签:

3条回答

长发绾君心

2020-12-30 15:25

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>

0 讨论(0)

北海茫月

2020-12-30 15:38

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() + '%');
               }

           })   
       });

    });

0 讨论(0)

小蘑菇

2020-12-30 15:39
As of version 1.2.7 there is now a format hook for performing tasks like this:
```
$(".dial").knob({
  'format' : function (value) {
     return value + '%';
  }
});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...