拉斐尔的简单圆环图答案

【问题标题】：Simple Donut Chart with Raphael拉斐尔的简单圆环图
【发布时间】：2011-12-29 18:42:30
【问题描述】：

使用“如何在 raphael 中实现带路径的甜甜圈洞”(How to achieve 'donut holes' with paths in Raphael) 中的示例，我能够根据我的用例对代码进行更多调整。

我的下一个目标是在鼠标悬停时放大其中一个扇区，而不是将其拉离内圈。这可能吗？

我希望它看起来像这样：

【问题讨论】：

【解决方案1】：

只需将 angleplus 值从 360 更改为 369.5...就足够了... :)

【讨论】：

【解决方案2】：

晚上，

我在这里有点作弊。甜甜圈现在的工作方式是使用缩放，但要做你想做的事，你不能那样做。选项是重新计算扇区，或作弊。我都做了。

我添加了第二个带有更大扇区的甜甜圈，然后我将其隐藏了。在原始甜甜圈上，鼠标悬停会隐藏相应的扇区并显示较大环中的扇区。

外圈有一个鼠标悬停功能，可以逆转这个过程。

这是一个 fiddle，希望它可以工作。

这不是最佳解决方案，但它可能会帮助您。

【讨论】：

完美！我在我的解决方案上也作弊了一点，但它抛弃了每个标签周围美学上需要的薄白色边框，而且更脏。非常感谢。它可能不是“理想的”，但效果很好:) 我最终将“鼠标悬停/移出”更改为单击事件。这是新的小提琴：jsfiddle.net/Swivelgames/sCKcu 再次感谢amadan。
@Swivelgames，你的甜甜圈代码看起来很棒。基本上你的代码是在反时钟方向绘制甜甜圈，我想知道我们是否可以通过对你的代码进行一些更改来绘制它，你能帮我这样做吗？
我想改变线条角度 += angleplus;到角度 -= 角度加；应该反转渲染的方向。你可以试试……
@amadan，感谢您的回复，我会尝试一次。这个甜甜圈创建功能似乎有一个限制，基本上只有当至少有 2 个值时才会正确创建甜甜圈。您可以在jsfiddle.net/VdTH4/241 查看此方案。请检查一次，让我知道如何处理这些情况。
我可以为你解决这个问题，但我不会。我会告诉你，问题在于只有一个值（100%），开始和结束角度实际上是相同的。您需要做的是修改代码以捕捉角度为 360 度的情况，然后将其缩小。这是一个提示 - 它是 angleplus 值。