Flotr2のクリック処理周りを使ってみた

Web上でのグラフをやってみたいと思い、Flotr2を使ってみることにしました。

式を描画するだけだとexampleと同じなので、折角ならスワイプで式を上下左右に動かせると良いなと思い、クリック周りを調べて見ることにしました。

Flotr2では、クリック処理は以下のように書くと実装できました。

Flotr.EventAdapter.observe(container, 'flotr:click', function(position) {
    //クリック処理
    alert("X:"+position.x+" Y:"+position.y);
});

Flotr.EventAdapter.observe関数の第二引数『'flotr:click'』がクリックであることを指している部分です。

ただ私が使いたいのはクリックではなくスワイプの処理なので、『click』ではなく『mouseup』や『mousedown』、『mousemove』です。

探してみると以下のような形で、『mousedown』がありました。

Flotr.EventAdapter.observe(container, 'flotr:mousedown', function(event) {
    //mousedown処理
});

第三引数のfunctionの中がeventでpositionではないのです。（eventの中はしっかり見ていないので、まだ分かりません）

positionではないということでpositionの入手は出来ませんでした、『mousedown』と『mousemove』を見てみると『mousemove』はpositionが取得できました。

そのため、『mousedown』と『mouseup』のタイミングで『mousemove』の座標を保存することで、スワイプを実装しました。

第二引数と第三引数の対応を表にします。

第二引数	第三引数
flotr:click	function(position)
flotr:mousedown	function(event)
flotr:mouseup	function(event)
flotr:mousemove	function(e,position)

このような関係になっていました。