1

次のコードを試しました-

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

ラファエルのサンプルページでうまく機能します - http://g.raphaeljs.com/barchart2.html

しかし、私のページでは、ツールチップの黒背景がマウスオーバーごとに「ジャンプ」しています。[ツールチップのテキストは正しい x、y のまま]

間違ったライブラリを使用していませんか? どうすれば修正できますか？

4

2 に答える 2

0

それは不可解です。なぜそれが起こっているのか正確にはわかりませんが、より良い解決策があります。バーごとに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

于 2013-02-01T16:22:09.610 に答える