如何使用jquery旋鈕在單個錶盤中繪製多個弧線？

Question

我想在單撥號使用jquery knob多弧。可能嗎？見下圖。

到目前爲止，我已經嘗試的代碼。

$(".dial").knob({ 
       'readOnly': true, 
       'displayPrevious': true, 
       change : function (value) { 
        //console.log("change : " + value); 
       }, 
       release : function (value) { 
        console.log("release : " + value); 

        //need to out some logic here 
       }, 
       cancel : function() { 
        console.log("cancel : " + this.value); 
       }, 
       draw : function() { 
        $(this.i).val(this.cv + '%'); 
       } 
      }); 

      $('.dial').val(10).trigger('change'); 

我打開使用其他jquery庫或解決方案也。

Answer 1

使用每個顏色的單個旋鈕可以在一個錶盤中顯示多個圓弧，並將div的位置設置爲絕對值。實施例3層的顏色：

<input class="knob" type='text' value='100' data-angleOffset="0" 
data-angleArc="120" data-fgColor="green" data-displayInput=false /> 

<input class="knob" type='text' value='100' data-angleOffset="120" 
data-angleArc="120" data-fgColor="red" data-displayInput=false /> 

<input class="knob" type='text' value='100' data-angleOffset="240" 
data-angleArc="120" data-fgColor="blue" data-displayInput=false /> 

的data-angleOffset的值設置電弧，的data-angleArc寬度的值的開始。 初始化旋鈕和設置含有畫布絕對的div位置：

$(function() { 
    $('.knob').knob({}); 
    $(".knob").parent("div").css("position", "absolute");  
}); 

工作實施例：從這個演示jQuery Knob multiple arc

$(function() { 
 
    $('.knob').knob({}); 
 
    $(".knob").parent("div").css("position", "absolute");  
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="http://anthonyterrien.com/js/jquery.knob.js"></script> 
 
<input class="knob" type='text' value='100' data-angleOffset="120" data-angleArc="120" data-fgColor="red" data-displayInput=false /> 
 
<input class="knob" type='text' value='100' data-angleOffset="0" 
 
data-angleArc="120" data-fgColor="green" data-displayInput=false /> 
 
<input class="knob" type='text' value='100' data-angleOffset="240" 
 
data-angleArc="120" data-fgColor="blue" data-displayInput=false />