2

我期待定制Raphael JS 饼图...

这是代码， http://jsfiddle.net/kcQbe/

我在其中设置了4个类别...

首先，我想更改在 JavaScript 中单独定义的每个类别的颜色填充或路径颜色，例如，类别循环到数组中，data = [90, 90, 90, 90]这里称为 90 是我们定义类别角度的度数，就像我想要的那样颜色也应该单独定义并与此类似...可能是这样fill = ["#000","#ccc","#ddd","#eee"] 我不确定的想法可能是错误的...

同样在单击它时颜色会发生变化，我希望颜色应保持与单击它之前的颜色相同...

有人可以帮忙吗？？？

4

3 回答 3

3

通过查看 Jeff 和 A​​lex 的其他答案，创建了一个工作示例 - Demo

我认为这是您想要的输出

于 2012-07-24T12:14:30.187 回答
2

只需更新杰夫的答案：

颜色：

将颜色参考传递给函数：r.customAttributes.segment = function (x, y, r, a1, a2, color) {...

在数据后添加颜色数组 var：var data = [90, 90, 90, 90], color = ['#ff0000', '#00ff00', '#0000ff', '#ff0000'], ...

在最后一个循环中：

            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 () {
            ...

编辑：

然后（感谢Matt Ball的var props {部分）

更改 r.customAttributes.segment = function (x, y, r, a1, a2, color) {... 用这个：

                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;
于 2012-07-19T07:38:27.950 回答
2

如果您对 JavaScript 不太了解，您可能不应该使用 Raphael JS。

要更改填充颜色，您必须修改此行：

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

把它变成一个函数，告诉它你想要什么颜色。目前， clr 是一个简单的函数

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

要摆脱动画，请删除“animate();”行 （低于数据[i] *= 2）

于 2012-06-16T18:06:18.217 回答