라디오 버튼이있는 방사형 진행률 막대

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

내가했던 원 진행률 표시 줄과 내가이 해낸 가장 쉬운 솔루션에 대한 몇 가지 연구; 캔버스에 그리기. 링크는 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; 
};