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

如何将弧形图转换为条形图，使用SVG路径和Javascript构建

1 个答案: