在RaphaelJS中自定义饼图

Question

I am looking forward to customizing the Raphael JS Pie Chart ...

Here is the code, http://jsfiddle.net/kcQbe/

I have set 4 categories in it...

1st of all i want the change the color fills or path's color on every category defined separately in JavaScript, for example like categories are looping into array which is called as data = [90, 90, 90, 90] here 90 is the degree at which we are defining the category's angle like that i want color should also b define separately and similar to that... may be like this fill = ["#000","#ccc","#ddd","#eee"] I could be wrong for that idea i am not sure...

Also on clicking it the color changes, i want that the color should remain the same as it is before clicking it...

Can anyone help it???

Answer 1

By going through the other answers by Jeff and Alex, created a working example - Demo

I think this is your desired output

Answer 2

You probably should not be using Raphael JS if you don't know much about JavaScript.

To change the fill color, you have to modify this line:

fill: "hsb(" + clr + ", .75, .8)"

Turn that into a function that tells it what color you want. Currently, clr is a simple function given by

    clr = (a2 - a1) / 360;
    a1 = (a1 % 360) * Math.PI / 180;
    a2 = (a2 % 360) * Math.PI / 180;

To get rid of animation, remove the line "animate();" (below data[i] *= 2)

Answer 3

Simply update the Jeff answer:

For color:

Pass color reference to function: r.customAttributes.segment = function (x, y, r, a1, a2, color) {...

Add color array var after data: var data = [90, 90, 90, 90], color = ['#ff0000', '#00ff00', '#0000ff', '#ff0000'], ...

In the final loop:

            start = 0;
            for (i = 0; i < ii; i++) {
                var val = 360 / total * data[i];
                var col = color[i]; //Add color from array
                (function (i, val) {
                    //Here we pass the color (col)
                    paths.push(r.path().attr({segment: [200, 200, 1, start, start + val, col], stroke: "#fff"}).click(function () {
            ...

EDIT:

an then (thanks to Matt Ball for the var props { part)

Change the r.customAttributes.segment = function (x, y, r, a1, a2, color) {... with this:

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

                if (color) {
                    props.fill = color;
                }
                return props;