Flotで片軸だけパン(移動)出来るようにする方法

jQuery で使用できるグラフ描画のアレの一つFlotでドラッグで移動できるのは便利だけど、片方向（X軸だけとかY軸だけ）の移動をしたい時は・・・

簡単にはできません。

追記開始

忘れてたことが1点

各軸のオプションでpanRangeを調整すると方軸だけ移動は可能です。

しかし、zoomRangeなどに影響があるのか、複雑になってくるとうまく機能してくれません。

また、panRangeの設定は軸が増えるごとに設定をしなくてはならず面倒です。

確かに、あるグラフラインだけを移動したい場合はちょちょいっといじると出来ますが全体共通にしたい場合は面倒です。

そのため、時と場合を考えてこの方法を使用してください。

追記終了

なので、jquery.flot.navigate.jsに少し改良を加えます。

 これだと簡単なんだよな

120行目付近を以下の用に変更

        pan: {
            interactive: false,
            cursor: "move",
            frameRate: 20,
            move: "xy" /* カスタム 移動可能な方向を指定 */
        }

move : "xy"ってところが増えてます。

frameRate: 20,の","を忘れないように

そして、

280行目付近にある

             var delta =  {
                    x: +args.left,
                    y: +args.top
                };

を

            var delta;
            var opts = plot.getOptions();
            if(opts.pan.move == "x"){
                delta = {
                    x: +args.left,
                    y: 0
                };
            } else if(opts.pan.move == "y") {
                delta = {
                    x: 0,
                    y: +args.top
                };
            } else {
                delta = {
                    x: +args.left,
                    y: +args.top
                };
            }

に変更

 そして、後はグラフのオプションを設定するときに

var options = {
    xaxis:{hoge},
    yaxis:{hoge},
    pan:{
        interactive: true,
        move: "x"
    }
}

 ってな感じにするとx軸だけ移動します。

move: "y"

ってするとy軸だけ

move: "xy" または未指定で両軸移動します。

ま、あまり検証してないので・・・

moveにnullとか突っ込むとたぶんエラーはきます。

使いどころは結構あるようで・・・意外にない。

私も最初はいると思って改良したのですが、結果

「本当に必要？」

ってなりましたｗ

ま、意外に簡単にできたので紹介しておきます。