如何将圆弧图转换为条形图，使用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