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

但是在我的页面中，工具提示blackbackground正在“跳跃”每只鼠标。 [工具提示文本保持正确的x，y]

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

Answer 1

这令人费解。我不确切知道为什么会这样，但是有一个更好的解决方案：为每个栏创建一次弹出窗口，然后在hoverin / hoverout上显示或隐藏它。

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

似乎解决了这个问题

raphael新手：弹出背景是跳跃

2 个答案: