raphael - raphael newbie：弹窗背景在跳跃

Question

我尝试了以下代码 -

  var fin = function () {
   // this.flag = r.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
   this.flag = r.popup(this.bar.x, 280, this.bar.y || "0").insertBefore(this);
   };

  var fout = function () {
   this.flag.animate({opacity: 0}, 200, function () {this.remove();});
   };

. . .
r.barchart(10, 10, 900, 300, [[55, 20, 13, 32]], 0, {type: "sharp"}).hover(fin, fout);

它在 raphael 示例页面中运行良好 - http://g.raphaeljs.com/barchart2.html

但在我的页面中，工具提示黑色背景是“跳跃”每个鼠标。[工具提示文本保持在正确的 x,y]

我使用了错误的库吗？我如何解决它？

Answer 1

这很令人费解。我不知道为什么会发生这种情况，但有一个更好的解决方案：为每个栏创建一次弹出窗口，然后在悬停/悬停时显示或隐藏它。

var r = Raphael(0, 0, 800, 500);

fin = function () {
    if (!this.hasOwnProperty("flag")) {
        this.flag = r.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
    }
    this.flag.attr("opacity", 1);
},
fout = function () {
    this.flag.animate({opacity: 0}, 300);
};

var bars = r.barchart(10, 10, 900, 300, [[55, 20, 13, 32]], 0, {type: "sharp"}).hover(fin, fout);

jsFiddle

Answer 2

Raphael 2.1.2 似乎解决了这个问题