ラジオボタン付き放射状進捗バー

Question

このコードをラジオボタンで動作する円の進​​行状況バーにしたいのですが、このコードは水平方向の進行状況バーです。私のコード：

$(document).ready(function() { 
    $('#progressbar').progressbar({ 
     value: 0 
    }); 

    $('[name*=answers]').click(function() { 
     var totalChecked = 0; 
     var totalRadioGroups = 0; 
     var previousName = ''; 
     $.each($('[name*=answers]'), function(index, value) { 
      var radioName = $(this).attr('name'); 
      var radioId = this.id; 

      if (previousName != radioName) { 
       totalRadioGroups++; 
      } 
      if ($('#' + radioId).is(':checked')) { 
       totalChecked++; 
      } 
      previousName = radioName; 
     }); 
     var percentage = (totalChecked/totalRadioGroups) * 100; 
     $('#progressbar').progressbar('value', percentage); 
     $('#percentage').html(percentage.toFixed(2) + "%"); 
    }); 

}); 

<div id="progressbar"></div> 
<div id="percentage"></div> 

Answer 1

私はサークルのプログレスバーに関するいくつかの研究とiが思い付いた最も簡単な解決策をしました。キャンバスに描く。リンクはDEMOで、プログレスバーを分割するセクションの数を選択します。次にクリックすると、クリックごとに開始されます。 私はこれが私が見つけた最も簡単な方法であり、必要に応じてカスタマイズすることができます。

HTML

<canvas id="myCanvas" width="220" height="220"></canvas> 
<br> 
<br> 
<button id="minus">-</button> <span id="num">0</span> <button id="plus">+</button> 
<br><br> 
<button id="next">Next</button> 

CSS

#myCanvas{ 
    border:none; 
} 

JS

var f = 0; 
$(document).ready(function(){ 

    var n = $('#num').text(); 

    $('#minus').click(function(){ 
    if(n>0){ 
    n--; 
    $('#num').text(n); 
    } 
    }); 

    $('#plus').click(function(){ 
    n++; 
    $('#num').text(n); 
    }); 

    $('#next').click(function(){ 
    if(n == 0){ 
     draw(2); 
    } else { 
    var x = 2/n; 
    x= f+x; 
    draw(x); 
    } 
    }); 

}); 

function draw(e){ 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    ctx.beginPath(); 
    ctx.lineWidth = 15; 
    ctx.arc(95,50,40,0,e*Math.PI); 
    ctx.stroke(); 
    f = e; 
};