Question

我遇到了问题，我创建了一个饼图，并希望将Text放在每个隔间内。

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事件，从而导致动画再次扩大规模。

如何避免这种情况，以便我的动画正常工作？

谢谢。

Answer 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);

G Raphael js在饼图中添加文字

1 个答案: