Question

我期待着自定义 Raphael JS饼图 ......

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

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

同样点击它时颜色会发生变化，我希望颜色在点击之前保持不变...

任何人都可以帮忙吗???

Answer 1

通过Jeff和Alex的其他答案，创建了一个工作示例 - Demo

我认为这是你想要的输出

Answer 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）

Answer 3

只需更新杰夫答案：

对于颜色：

将颜色引用传递给函数：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 () {
            ...

编辑：

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

使用此更改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;

在RaphaelJS中自定义饼图

3 个答案: