3

RaphaelJSでグラフウィジェットを作成しました。データはデータベースから取得され、キャンバスにグラフ化されます。この問題は、データポイントのツールチップを作成しようとしたときに発生しました。ツールチップはフェードインしますが、フェードアウトするとバグが発生します。フェードアウトする場合とフェードアウトしない場合があります（マウスが高速で移動している場合はフェードアウトしないようです）。マウスをデータポイントの上に置くと、データポイントが大きくなることに注意してください。私のコードを改善するのに役立つものがあれば役に立ちます。ありがとう。以下のコード：

circle2[<?php echo $i?>].hover(function () {
circle2[<?php echo $i?>].attr({"stroke": "#000"});
circle2[<?php echo $i?>].attr({"r": "8"});
rect.toFront();
text.toFront();
rect.attr({"x":30+50*<?php echo $i ?>,"y":220-250*<?php echo $time_value[$i]/100000;?>});
text.attr({"text":"<?php echo $date[$i]?>\nValue: $<?php echo $time_value[$i]?>\nInvested: $<?php echo $time_value[$i]?>","y":250-250*<?php echo $time_value[$i]/100000;?>,"x":33+50*<?php echo $i ?>});
rect.animate({"opacity":0.8},500);
text.animate({"opacity":1.0},500);
},
    function () {
         rect.attr({"opacity":0});
         text.attr({"opacity":0});
         circle2[<?php echo $i?>].attr({"stroke": "none"});
         circle2[<?php echo $i?>].attr({"r": "5"});
    }
);
4

1 に答える 1

2

問題は次のとおりです（95％の確実性）：急速なホバーが発生し、ホバーの継続時間がホバー開始アニメーションの継続時間（この場合は500ミリ秒）よりも短い場合、ホバーアウト関数が要素を設定しますアニメーションが終了する前に不透明度を0に設定し、背景とテキストの不透明度をそれぞれ0.8と1.0に戻します。

解決策は、ホバーサイクルの終了時に進行中のアニメーションを停止することです。次のようにホバーアウトハンドラーを更新できるはずです。

... 
function () {
    rect.stop().attr({"opacity":0});
    text.stop().attr({"opacity":0});
    circle2[<?php echo $i?>].attr({"stroke": "none"});
    circle2[<?php echo $i?>].attr({"r": "5"});
}
于 2012-09-23T22:36:37.737 に答える