G Raphael js 在饼图中添加文本答案

【问题标题】：G Raphael js add text in pie chartG Raphael js 在饼图中添加文本
【发布时间】：2014-07-22 12:16:05
【问题描述】：

我遇到了一个问题，我创建了一个饼图，并且想在每个隔间内放置文本。

var pie = paper.piechart(pwidth / 2, pheight / 2, radius/1.2, data, {
        stroke: bgcolor,
        strokewidth: 1,
        startFromFixedAngle: 0,
        colors: barcolors
    });

并添加文字：

  var t = paper.text(pwidth / 2 - 200, pheight / 2 - 300, 'Reports').attr({ 'fill': '#000000', 
 'font-size': '18', "font-weight": 800, 'opacity': 1.0 });

现在的问题是，当我在饼图上添加悬停事件并且光标移到文本上时，它会引发一个 MouseOut 事件，导致我的动画缩小，当光标移出文本时再次引发一个 MouseOver 事件，导致动画再次扩大规模。

我怎样才能避免这种情况，这样我的动画才能正常工作？

谢谢。

【问题讨论】：

标签： javascript raphael pie-chart event-bubbling graphael

【解决方案1】：

解决方案： 1) 用相同的参数和数据制作另一个饼图，比如 pieShadow。 2) 使每个扇区的不透明度：0

pieShadow.series.items[0].attr({ 'opacity': 0 });

3) 现在在 pieShadow 上添加一个悬停事件并确定用户悬停在哪个扇区：

for (var index_i = 0; index_i < pie.covers.items.length; index_i++) {
                if (this.cover == pie.covers.items[index_i]) {
                    break;
                }
            }

并使实际的饼图显示悬停效果：

pie.series.items[index_i].scale(1.1, 1.1, this.cx, this.cy);

【讨论】：