在 RaphaelJS 中自定义饼图答案

【问题标题】：Customizing Pie Chart in RaphaelJS在 RaphaelJS 中自定义饼图
【发布时间】：2012-06-16 14:42:18
【问题描述】：

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

我在里面设置了4个类别...

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

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

谁能帮忙？？？

【问题讨论】：

标签： javascript jquery svg raphael pie-chart

【解决方案1】：

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

我认为这是你想要的输出

【讨论】：

【解决方案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）

【讨论】：

【解决方案3】：

只需更新 Jeff 的答案：

颜色：

将颜色引用传递给函数：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;

【讨论】：