0

我正在尝试更改此饼图，以便当我单击一个段时，不同段的颜色不会改变。我看到填充与段的形状有直接关系，但我完全烂透了。请帮忙！您可以在此处查看实际的饼图：

http://raphaeljs.com/growth-pie.html

function drawgrowingpie () {
    var r = Raphael("holder");

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

    function animate(ms) {
        var start = 0,
            val;
        for (i = 0; i < ii; i++) {
            val = 360 / total * data[i];
            paths[i].animate({segment: [200, 200, 150, start, start += val]}, ms || 1500, "bounce");
            paths[i].angle = start - val / 2;
        }
    }

    var data = [24, 92, 24, 52, 78, 99, 82, 27],
        paths = r.set(),
        total,
        start,
        bg = r.circle(200, 200, 0).attr({stroke: "#fff", "stroke-width": 4});
    data = data.sort(function (a, b) { return b - a;});

    total = 0;
    for (var i = 0, ii = data.length; i < ii; i++) {
        total += data[i];
    }
    start = 0;
    for (i = 0; i < ii; i++) {
        var val = 360 / total * data[i];
        (function (i, val) {
            paths.push(r.path().attr({segment: [200, 200, 1, start, start + val], stroke: "#fff"}).click(function () {
                total += data[i];
                data[i] *= 2;
                animate();
            }));
        })(i, val);
        start += val;
    }
    bg.animate({r: 151}, 1000, "bounce");
    animate(1000);
};
4

1 回答 1

0

改变

return {
    // snip...
    fill: "hsb(" + clr + ", .75, .8)"
};

到别的东西，或fill从返回的对象中完全删除该属性。

这是朝着正确方向轻推：不是每次为切片设置动画时都更改颜色，而是现在将颜色传递给segment函数。这意味着两个不同的调用者（初始化程序和点击处理程序）可以不同地控制颜色。如果没有（颜色）被传递给该函数，则该segment函数被更改为不返回任何信息。 这意味着处理程序不会改变颜色，因为只有初始化代码传递颜色信息。fillclrclick

希望这对你有意义。

function drawgrowingpie() {
    var r = Raphael("holder");
                                                        // ↓↓↓ pass the color
    r.customAttributes.segment = function(x, y, r, a1, a2, clr) {
        var flag = (a2 - a1) > 180;
        a1 = (a1 % 360) * Math.PI / 180;
        a2 = (a2 % 360) * Math.PI / 180;
        var props = {
            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"]]
        };

        // only return fill properties if the color was passed
        if (clr) {
            props.fill = "hsb(" + clr + ", .75, .8)";
            console.log(clr);
        }
        return props;
    };

    function animate(ms) {
        var start = 0,
            val;
        for (i = 0; i < ii; i++) {
            val = 360 / total * data[i];
            paths[i].animate({
                // notice that no color data is passed here...
                segment: [200, 200, 150, start, start += val]
            }, ms || 1500, "bounce");
            paths[i].angle = start - val / 2;
        }
    }

    var data = [24, 92, 24, 52, 78, 99, 82, 27],
        paths = r.set(),
        total, start, bg = r.circle(200, 200, 0).attr({
            stroke: "#fff",
            "stroke-width": 4
        });
    data = data.sort(function(a, b) {
        return b - a;
    });

    total = 0;
    for (var i = 0, ii = data.length; i < ii; i++) {
        total += data[i];
    }
    start = 0;
    for (i = 0; i < ii; i++) {
        var val = 360 / total * data[i];
        (function(i, val) {
            paths.push(r.path().attr({
                // ...but we do pass color data here      ↓↓↓↓  
                segment: [200, 200, 1, start, start + val, val],
                stroke: "#fff"
            }).click(function() {
                total += data[i];
                data[i] *= 2;
                animate();
            }));
        })(i, val);
        start += val;
    }
    bg.animate({
        r: 151
    }, 1000, "bounce");
    animate(1000);
}

http://jsfiddle.net/mattball/xsfQj/

于 2012-04-21T04:59:28.420 回答