6

JQuery Knobを使用していくつかのクールなグラフを作成していますが、完全に機能しています。ただし、問題が1つあります。グラフ間の表示番号に「％」記号を連結させたいということです。しかし、私はそれを機能させることができないようです。jqueryを介して入力を変更しても、それは実行されません。ライブラリのコードを読み取ろうとしましたが、うまくいきませんでした。他の誰かが以前にこの問題を抱えていましたか？

4

3 に答える 3

30

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>​
于 2012-09-24T05:44:46.487 に答える
5

バージョン1.2.7以降、次のformatようなタスクを実行するためのフックがあります。

$(".dial").knob({
  'format' : function (value) {
     return value + '%';
  }
});
于 2014-06-20T17:36:18.043 に答える
2

私もアニメーションでこれを達成することができました：

私のソリューションは、値が増加するたびにパーセンテージを追加することでこれを行います。

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

           })   
       });

    });
于 2013-10-14T13:18:46.883 に答える