Question

我对使用raphael js库非常陌生，我正在努力解决这个问题。我正在尝试创建一个基于百分比的图表，其中100％将是一个完整的圆圈。我已经想出了圆圈部分，但是如何更改它以显示半圆为50％或四分之一圆为25％？

Answer 1

我建议在Raphael主页上查看this示例背后的代码。应该很容易修改它以满足您的需求。

此功能尤其适用于您所需要的

var rad = Math.PI / 180;
function sector(cx, cy, r, startAngle, endAngle, params) {
        var x1 = cx + r * Math.cos(-startAngle * rad),
        x2 = cx + r * Math.cos(-endAngle * rad),
        y1 = cy + r * Math.sin(-startAngle * rad),
        y2 = cy + r * Math.sin(-endAngle * rad);
    return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
}

所以，50％的切片将是

var fifty = sector(100,100,50,0,180,{"fill":"red"});
var twentyfive = sector(100,100,50,180,270,{"fill":"red"});

当然，这是在使用学位 - 你可能想要包装它以便你可以使用百分比。

Answer 2

您必须使用path（）并使用SVG的路径语法指定它。以下是创建闭合四分之一圆（左上象限）的示例：

var arcPath = paper2.path("M200,200 v-150 a150,150 0 0,0 -150,150 z");
arcPath.attr("fill", "red");

有关SVG路径的更多信息，请参阅this link。

使用raphael的半圈

2 个答案: