jqplot.cursor.js

投稿日: 2012年5月8日 作成者: alphasis

jQueryのjqPlotプラグインの「plugins」フォルダに入っている「jqplot.cursor.js」もしくは「jqplot.cursor.min.js」は、ズーム（拡大縮小）やツールチップなど、マウスカーソルに関わる機能を拡張したい際に読み込む必要があるjavascriptファイルだ。

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

導入

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

読み込み

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

<script language="javascript" type="text/javascript" src="plugins/jqplot.cursor.min.js"></script>

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

実装例（サンプル）

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

２つ目のグラフ上で、マウスカーソル（マウスポインタ）で選択すると、選択した範囲の期間を、１つ目のグラフ全体に拡大して表示する。２つ目のグラフを、ダブルクリックすると、元に戻る。

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

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

オプション

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

プロパティ

cursor

カーソルに関するオプション。

show

カーソルを表示するか。「true」を指定すると表示。「false」を指定すると非表示。

showTooltip

マウスカーソルの位置のXとYの値を示すツールチップを表示するか。「true」を指定すると表示。「false」を指定すると非表示。初期設定値は「true」。

followMouse

ツールチップを、マウスカーソルの位置の近くに表示するか。「true」を指定すると、マウスカーソルの近くに表示する。初期設定値は「false」。

tooltipLocation

ツールチップを表示する位置。初期設定値は「se」。

  • nw： 左上
  • n： 上
  • ne： 右上
  • e： 右
  • se： 右下
  • s： 下
  • sw： 左下
  • w： 左

zoom

ズーム（拡大縮小）機能を有効にするか。「true」を指定すると、ズーム機能が有効になる。「false」を指定すると、ズーム機能が無効になる。初期設定値は「false」。

showVerticalLine

マウスカーソルの位置に垂直線を表示するか。「true」を指定すると表示。「false」を指定すると非表示。初期設定値は「false」。

showHorizontalLine

マウスカーソルの位置に水平線を表示するか。「true」を指定すると表示。「false」を指定すると非表示。初期設定値は「false」。

constrainZoomTo

ズームの制限。「none」を指定すると制限しない。「x」を指定すると、X軸だけズーム。「y」を指定すると、Y軸だけズーム。初期設定値は「none」。

constrainOutsideZoom

グラフの外へのズームを制限するか。「true」を指定すると制限。「false」を指定すると制限しない。初期設定値は「true」。

showTooltipOutsideZoom

グラフの外を選択するときにも、ツールチップを表示させるか。「true」を指定すると表示。「false」を指定すると非表示。初期設定値は「false」。

メソッド

zoomProxy

targetPlot = jQuery . jqplot(
    // ターゲット用のグラフ
);
controllerPlot = jQuery . jqplot(
    // コントロール用のグラフ
);
jQuery . jqplot . Cursor . zoomProxy( targetPlot, controllerPlot );

実装例（サンプル）一覧

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

スポンサード リンク

カテゴリー: cursor, JavaScript, jqPlot, jQuery, プラグイン パーマリンク