如何使用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的位置设置为absolute：

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

工作示例：jQuery Knob multiple arc

＆＃13;

＆＃13;

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

＆＃13;

<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 />

＆＃13;

＆＃13;

＆＃13;