Half circle using raphael

I'm very new to using raphael js library and I'm trying to figure it all out. I'm trying to create a chart based on percentages where 100% would be a full circle. The circle part I have figured out, but how开发者_如何转开发 would I go about changing it to show a half-circle for 50% or a quarter of a circle for 25%?

I recommend looking at the code behind this example on the Raphael home page. It should be easy enough to modify it to suit your needs.

This function in particular is what you're looking for

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);
}

so, a 50% slice would be

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

Of course, this is working with degrees - you may want to wrap it so that you can use percentages.

You have to use path() and specify it using SVG's path syntax. Here is an example of creating a closed quarter-circle (upper left quadrant):

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

See this link for more on SVG Paths.