JQuery Knob显示数字变化答案

【问题标题】：JQuery Knob display number changeJQuery Knob显示数字变化
【发布时间】：2012-09-24 04:51:24
【问题描述】：

我正在使用JQuery Knob 制作一些很酷的图表，它运行良好。但是我有一个问题：我想让图表之间的显示数字连接一个'％'符号。但我似乎无法让它发挥作用。通过 jquery 修改输入不会这样做，我尝试读入库的代码但没有运气。有没有其他人遇到过这个问题？

【问题讨论】：

您能展示一下您的尝试吗？这将使任何试图帮助你的人受益。
在创建图表后使用 JQuery 更改我用于图表的输入值，在末尾添加一个 '%'，但没有这样做。尝试使用 firebug 手动更改值进行测试，但这也没有用。我打开了旋钮源代码，但他们在那里使用了很多我缺乏知识的html5，试图在某些值中添加'％'但没有成功......

标签： php javascript jquery jquery-plugins

【解决方案1】：

如果您快速浏览一下 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>

【讨论】：

【解决方案2】：

从 1.2.7 版开始，现在有一个 format 挂钩，用于执行如下任务：

$(".dial").knob({
  'format' : function (value) {
     return value + '%';
  }
});

【讨论】：

【解决方案3】：

我也设法通过动画实现了这一点：

我的解决方案是在每次增加值时添加百分比：

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

           })   
       });

    });

【讨论】：