如何將圓弧圖轉換爲條形圖，使用SVG路徑和Javascript構建

Question

我是SVG的新手，我需要將圓弧圖轉換爲條形圖。以下是Arc圖表的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 x的計算var x = 0
• 的單槓改變var y計算到var y = 0

這裏被簡化您的垂直條功能：JSfiddle