raphael.js – 将饼图转换为甜甜圈图
我正在尝试使用位于此处的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); } 如何修改这个以便从整个馅饼中移除一个固定半径的孔？ 我在这里看到这篇文章，这有帮助，但我不知道如何或在何处将其应用于我的代码：
如何在拉斐尔的路径上实现“甜甜圈洞”
如何创建一个饼图的方式如下：
- 移动到圆心（cx，cy）： “M”，cx，cy
- 画一条直到弧开始的边缘（x1，y1）： “L”，x1，y1
- 根据一些数学计算得出一个弧： “A”，r，r，0，+（endAngle – startAngle> 180），0，x2，y2
- 画一条线回到圆圈的中间： 在这种情况下使用“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 ）来完成路径。 现在你有一块甜甜圈。
小提琴在这里。
**更新小提琴链接
为什么不在饼图的中心画圆圈？
paper.add([ { type: "circle", cx: 250, cy: 250, r: 150, fill: "#ffffff" }, ]);