raphael.js - 将饼图转换为圆环图

Question

我正在尝试使用位于此处的 raphael.js 示例：

http://raphaeljs.com/pie.html

但我想将饼图转换为圆环图（在所有切片的中间都有一个洞）。目前，正在使用以下代码创建每个切片：

function sector(cx, cy, r, startAngle, endAngle, params) {
        //console.log(params.fill);
        var x1 = cx + r * Math.cos(-startAngle * rad),
            x2 = cx + r * Math.cos(-endAngle * rad),
            y1 = cy + r * Math.sin(-startAngle * rad),
            y2 = cy + r * Math.sin(-endAngle * rad);
        return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
    }

我将如何修改它以便从整个饼图中删除一个固定半径的孔？我在这里看到了这篇文章，这很有帮助，但我不太清楚如何或在哪里将它应用到我上面的代码中：

How to achieve 'donut holes' with paths in Raphael

Answer 1

一块馅饼的制作方式是这样的：

1. 移动到圆心(cx,cy)："M", cx, cy
2. 画一条线直到边缘，圆弧的起点 (x1,y1)："L", x1, y1
3. 根据一些数学计算画一条弧线："A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2
4. 在圆的中间画一条线：在这种情况下使用“z”；这意味着移动到原点（cx，cy）

切片（路径）已准备就绪。

为了创建甜甜圈，您需要修改路径的组成方式。您需要有一条由 2 条弧线（内部和外部）和 2 条线组成的路径才能完成。

所以首先你需要找到路径的起​​点，基于将在甜甜圈中间的假想空圆的半径（半径为 rin）。让我们称这个点的坐标为 xx1 和 yy1：

xx1 = cx + rin * Math.cos(-startAngle * rad)
yy1 = cy + rin * Math.sin(-startAngle * rad)

你从这一点开始构建路径("M", xx1, yy1); http://jsfiddle.net/EuMQ5/425/

下一步是画线到圆的边缘（"L", x1, y1）。从那里你必须画外弧（ "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2 ）然后再画一条线到另一条线内弧的边缘（ "L", xx2, yy2 ）。获取 xx2 和 yy2 的值​​：

xx2 = cx + rin * Math.cos(-endAngle * rad)
yy2 = cy + rin * Math.sin(-endAngle * rad)  

最后一步是通过绘制内弧完成路径（"A", rin, rin, 0, +(endAngle - startAngle > 180), 1, xx1, yy1 ） .现在你有了一个甜甜圈。

The fiddle is here.

**更新小提琴链接

Answer 2

你为什么不在饼图的中心画一个圆圈呢？

paper.add([
    {
        type: "circle",
        cx: 250,
        cy: 250,
        r: 150,
        fill: "#ffffff"
    },
]);