JQuery Raphael饼图

时间:2013-12-09 16:03:16

标签: jquery raphael

我创建了一个饼图:

http://jsfiddle.net/amakkawy/cLRYq/

r.customAttributes.segment = function(x, y, r, a1, a2) {
    var flag = (a2 - a1) > 180,
    clr = (a2 - a1) / 360;
    a1 = (a1 % 360) * Math.PI / 180;
    a2 = (a2 % 360) * Math.PI / 180;
    return {
        path: [["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"]],
        fill: "url(http://www.trendir.com/outdoors/landscape-forms-shade-35-umbrella-under.jpg)"
    };
};

并且不确定如何设置此代码以使每个细分具有不同的图像/填充。

请指教。

由于

1 个答案:

答案 0 :(得分:0)

你可以试试我的代码

 r.customAttributes.segment = function (x, y, r, a1, a2) {
            var flag = (a2 - a1) > 180,
                    clr = (a2 - a1) / 360;
            a1 = (a1 % 360) * Math.PI / 180;
            a2 = (a2 % 360) * Math.PI / 180;
            return {
                path: [
                    ["M", x, y],
                    ["l", r * Math.cos(a1), r * Math.sin(a1)],
                    ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)],
                    ["z"]
                ],
                fill: "hsb(" + clr + ", .75, .8)"
            };
        };

http://jsfiddle.net/jophine/E8EU8/