jqplot.dragable.js

jQueryのjqPlotプラグインの「plugins」フォルダに入っている「jqplot.dragable.js」もしくは「jqplot.dragable.min.js」は、系列のデータポイントをドラッグで移動できるようにする際に読み込む必要があるjavascriptファイルだ。

「jqplot.dragable.min.js」は、「jqplot.dragable.js」の圧縮版で、機能に違いはない。

導入

「jqplot.dragable.js」もしくは「jqplot.dragable.min.js」は、jqPlotの「plugins」フォルダに入っている。

読み込み

パスは、アップロードした場所を指定する。

もちろん、「jquery-1.7.1.min.js」や「jquery.jqplot.min.js」なども読み込む必要がある。

実装例（サンプル）

実装例（サンプル）について

実装例（サンプル）のソースコードについては、こちら。

オプション

dragableに関する主要なオプション。

series

各系列ごとに指定する系列に関するオプション。１つ目の系列から順に、配列で指定する。

dragable

ドラッグ移動に関するオプション。

color

ドラッグ移動中のポイントの色を指定。

constrainTo

移動を制限する。

• none:制限しない
• x:X軸方向だけ移動可
• y:Y軸方向だけ移動可

実装例（サンプル）一覧

「jqplot.dragable.js」もしくは「jqplot.dragable.min.js」の実装例（サンプル）一覧。

• jQuery の jqPlot で作る、ドラッグでポイントを移動できる折れ線グラフ

  jQueryのjqPlotプラグインで作る、折れ線グラフにおいて、折れ線グラフのポイントをドラッグで移動できるようにする方法。

• jQuery の jqPlot で作るトレンドライン付きドラッグ移動可能折れ線グラフ

  jQueryのjqPlotプラグインで作る、トレンドライン付き折れ線グラフにおいて、折れ線グラフのポイントをドラッグで移動できるようにする方法。

• jQuery の jqPlot で作る、ポイントをY軸方向だけ移動できる折れ線グラフ

  jQueryのjqPlotプラグインで作る、折れ線グラフにおいて、折れ線グラフのポイントをドラッグで、Y軸（縦）方向だけ移動できるようにする方法。

• jQuery の jqPlot で作る、ドラッグでY軸方向だけ伸縮できる縦棒グラフ

  jQueryのjqPlotプラグインで作る縦棒グラフにおいて、ドラッグで、縦棒を、Y軸（縦）方向だけ、伸縮できるようにする方法。

• jQuery の jqPlot で作る、ドラッグでX軸方向だけ伸縮できる横棒グラフ

  jQueryのjqPlotプラグインで作る横棒グラフにおいて、ドラッグで、横棒を、X軸（横）方向だけ、伸縮できるようにする方法。

• jQuery の jqPlot で作る折れ線グラフのドラッグ中のポイントの色を指定

  jQueryのjqPlotプラグインで作る、折れ線グラフにおいて、折れ線グラフのポイントをドラッグで移動できるようにし、ドラッグ移動中のポイントの色を指定する方法。