호 차트를 가로 막 대형 차트로 변환하는 방법, SVG 경로 및 자바 스크립트로 빌드하기

Question

SVG를 처음 사용하기 때문에 호 차트를 막대 차트로 변환해야합니다. 다음은 Arc chart의 Javascript 코드와 jsfiddle 링크입니다.

function setArc(arc, percent) { 

var angle = 75; 
var radius = 50; 

var path = "M200,200"; 

for(var i = 0; i <= percent; i++) { 
    angle -=3.6; 
    angle %= 360; 
    var radians= (angle/180) * Math.PI; 

    var x = 100 + Math.cos(radians) * -1 * radius; 
    var y = 100 + Math.sin(radians) * radius; 

    if(i==0) { 
     path += ' M ' + x + ' ' + y; 
    } 
    else { 
     path += ' L ' + x + ' ' + y; 
    } 
} 

arc.setAttribute('d', path); 

}

JSFIDDLE

감사

일반적으로

Answer 1

, Math.sin 및 Math.cos을 삭제하기에 충분합니다. 그것은 당신에게 똑 바른 대각선을 줄 것이다.

그런 다음에서 하나를 선택 : 단순화 var y = 0 다음

에 var y의 계산을 변경 수평 막대 var x = 0

에 var x의 계산을 변경 수직 막대

• 당신의 수직 막대 기능 : JSfiddle