0

私はjQuery ノブを使用しており、以下のコードがあります。

var knobOption={//ref: https://github.com/aterrien/jQuery-Knob
    'min':0,
    'max':1,
    'width':100,
    'height':100,
    'thickness':0.1,
    'readOnly':true,//READ ONLY
    'fgColor': '#31bbff',
    //'bgColor':'#626262',
    'inputColor':'#868686',
    'change': function (v) {
        console.log("knob change:",v);
    },
    'format':function(value){//format to percentage
        console.log('fomarting knob ',value);
        if(isNaN(value)) return "-";
        else return (value*100).toFixed(1)+"%";//percentage
    },

    'draw' : function(){
        console.log("drawing",$(this).find('.knob'));
        $(this.i).css("font-size","19px");
    }
}

var $retention = this.$overviewHandler.find('#retention_wrapper');
$retention.find('#1_day .knob').knob(knobOption);
$retention.find('#3_day .knob').knob(knobOption);
$retention.find('#7_day .knob').knob(knobOption);

この後、Ajax コールバックで以下を呼び出します。

        $retention.find('#1_day .knob').val(oneDayRet).trigger('change');
        $retention.find('#3_day .knob').val(threeDayRet).trigger('change');
        $retention.find('#7_day .knob').val(sevenDayRet).trigger('change');

formatしかし、この後、0.704 の値を渡したにもかかわらず、フックの値が 1 であることがわかりました。だからノブは私が望むものではない100％を表示します。

私の問題は何ですか？

4

1 に答える 1

0

私はこれをもう少し見てきました。1 から 1000 までの値を渡してフォーマットすることで、目的を達成できると思います。

1 ～ 1000 の値を.704渡し704ます。行をフォーマットすると、次のようになります。 return (value*.1).toFixed(1)+"%";

新しいnobOptionsは次のようになります。最大値は1000であり、フォーマット方法が変更されています。

var knobOption={//ref: https://github.com/aterrien/jQuery-Knob
    'min':0,
    'max':1000,
    'width':100,
    'height':100,
    'thickness':0.1,
    'readOnly':true,//READ ONLY
    'fgColor': '#31bbff',
    //'bgColor':'#626262',
    'inputColor':'#868686',
    'change': function (v) {
        console.log("knob change:",v);
    },
    'format':function(value){//format to percentage
        console.log('fomarting knob ',value);
        if(isNaN(value)) return "-";
        else return (value*.1).toFixed(1)+"%";//percentage
    },

    'draw' : function(){
        console.log("drawing",$(this).find('.knob'));
        $(this.i).css("font-size","19px");
    }
}

編集

メソッドで値の出力をいじっているので、methodでそのフォーマットを逆にformatする必要もあります。.parse

したがって.parse、jQuery ノブ オプションに次のメソッドを追加すると、期待どおりに機能し始めるはずです。基本的に、私たちがやりたいことは、フォーマットが適用されているかどうかを確認することです。これを行うには、値が % で終わるかどうかを確認します。一致する場合は、フォーマットが適用されていると見なし、値を で割ります( format メソッドで.1を乗算したため)。.1

// ... codez
 'format': function(value) {
     if (isNaN(value)) return "-";
     return (value * .1).toFixed(1) + "%"; //percentage
 },
 'parse': function(value) {
     if (typeof(value) !== 'string') return value; // if we don't have a string, then don't bother parsing
     if(value === '-') return value;
     var suffix = '%';
     // see https://stackoverflow.com/a/2548133/296889
     if (value.indexOf(suffix, value.length - suffix.length) === -1) return parseFloat(value);
     return parseFloat(value) / .1; // there is special formatting, parse and convert
 },
// ... more codez

元の問題の理由は、私が知る限り、~~値を丸めるためのライブラリの使用によるものです。は~~、小数点以下の値を切り捨てるように見えます。

ライブラリは次のことを行っています var val = (~~ (((v < 0) ? -0.5 : 0.5) + (v/this.o.step))) * this.o.step; 。

(v < 0) ? -0.5 : 0.5.704 は 0 未満です。最終的には 0.5 になります。

0.5 + (v/this.o.step)- this.o.step は 1 です。.704 を 1 + 0.5 で割ると 1.204 になります。

~~1.204- これは 1 になります。

(1) * this.o.step- this.o.step は 1 です。1 かける 1 は 1 のままです。プロセス全体の結果は 1 になります。

そのため、.704 を入力すると 1 が返されます。したがって、上記のように、解決策は 10 進値を持たない入力を与えることです (10 進値が によって取り除かれないようにするため~~)。

于 2015-06-17T03:31:24.110 に答える