jQuery の jqPlot プラグインで作るズーム機能付き折れ線グラフ

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

jQueryのjqPlotプラグインで、X軸が時間軸である折れ線グラフにおいて、マウスカーソル（マウスポインタ）で選択した範囲を、ズーム（拡大）できるようにする方法。

実装例（サンプル）

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

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

実装例（サンプル）のソースコード

読み込み

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

<script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script>

<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.cursor.min.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />

読み込むファイル。

JavaScript

<script>
jQuery( function() {
jQuery . jqplot(
'jqPlot-sample',
[
[ [ '2012-01-01 0:00AM', 200 ], [ '2012-01-02 0:00AM', 737 ], [ '2012-01-03 0:00AM', 238 ], [ '2012-01-04 0:00AM', 217 ], [ '2012-01-05 0:00AM', 814 ], [ '2012-01-06 0:00AM', 764 ], [ '2012-01-07 0:00AM', 613 ], [ '2012-01-08 0:00AM', 996 ], [ '2012-01-09 0:00AM', 63 ], [ '2012-01-10 0:00AM', 698 ], [ '2012-01-11 0:00AM', 705 ], [ '2012-01-12 0:00AM', 347 ], [ '2012-01-13 0:00AM', 847 ], [ '2012-01-14 0:00AM', 629 ], [ '2012-01-15 0:00AM', 624 ], [ '2012-01-16 0:00AM', 509 ], [ '2012-01-17 0:00AM', 421 ], [ '2012-01-18 0:00AM', 579 ], [ '2012-01-19 0:00AM', 111 ], [ '2012-01-20 0:00AM', 421 ], [ '2012-01-21 0:00AM', 971 ], [ '2012-01-22 0:00AM', 369 ], [ '2012-01-23 0:00AM', 402 ], [ '2012-01-24 0:00AM', 551 ], [ '2012-01-25 0:00AM', 867 ], [ '2012-01-26 0:00AM', 868 ], [ '2012-01-27 0:00AM', 946 ], [ '2012-01-28 0:00AM', 109 ], [ '2012-01-29 0:00AM', 744 ], [ '2012-01-30 0:00AM', 664 ], [ '2012-01-31 0:00AM', 909 ], [ '2012-02-01 0:00AM', 52 ], [ '2012-02-02 0:00AM', 376 ], [ '2012-02-03 0:00AM', 355 ], [ '2012-02-04 0:00AM', 321 ], [ '2012-02-05 0:00AM', 972 ], [ '2012-02-06 0:00AM', 346 ], [ '2012-02-07 0:00AM', 767 ], [ '2012-02-08 0:00AM', 19 ], [ '2012-02-09 0:00AM', 272 ], [ '2012-02-10 0:00AM', 335 ], [ '2012-02-11 0:00AM', 775 ], [ '2012-02-12 0:00AM', 698 ], [ '2012-02-13 0:00AM', 49 ], [ '2012-02-14 0:00AM', 220 ], [ '2012-02-15 0:00AM', 75 ], [ '2012-02-16 0:00AM', 204 ], [ '2012-02-17 0:00AM', 861 ], [ '2012-02-18 0:00AM', 135 ], [ '2012-02-19 0:00AM', 906 ], [ '2012-02-20 0:00AM', 968 ], [ '2012-02-21 0:00AM', 95 ], [ '2012-02-22 0:00AM', 359 ], [ '2012-02-23 0:00AM', 937 ], [ '2012-02-24 0:00AM', 469 ], [ '2012-02-25 0:00AM', 412 ], [ '2012-02-26 0:00AM', 480 ], [ '2012-02-27 0:00AM', 428 ], [ '2012-02-28 0:00AM', 965 ], [ '2012-02-29 0:00AM', 36 ], [ '2012-03-01 0:00AM', 831 ], [ '2012-03-02 0:00AM', 521 ], [ '2012-03-03 0:00AM', 527 ], [ '2012-03-04 0:00AM', 389 ], [ '2012-03-05 0:00AM', 591 ], [ '2012-03-06 0:00AM', 996 ], [ '2012-03-07 0:00AM', 778 ], [ '2012-03-08 0:00AM', 854 ], [ '2012-03-09 0:00AM', 507 ], [ '2012-03-10 0:00AM', 694 ], [ '2012-03-11 0:00AM', 792 ], [ '2012-03-12 0:00AM', 982 ], [ '2012-03-13 0:00AM', 56 ], [ '2012-03-14 0:00AM', 699 ], [ '2012-03-15 0:00AM', 787 ], [ '2012-03-16 0:00AM', 202 ], [ '2012-03-17 0:00AM', 841 ], [ '2012-03-18 0:00AM', 700 ], [ '2012-03-19 0:00AM', 805 ], [ '2012-03-20 0:00AM', 774 ], [ '2012-03-21 0:00AM', 825 ], [ '2012-03-22 0:00AM', 250 ], [ '2012-03-23 0:00AM', 537 ], [ '2012-03-24 0:00AM', 980 ], [ '2012-03-25 0:00AM', 581 ], [ '2012-03-26 0:00AM', 702 ], [ '2012-03-27 0:00AM', 614 ], [ '2012-03-28 0:00AM', 371 ], [ '2012-03-29 0:00AM', 207 ], [ '2012-03-30 0:00AM', 105 ], [ '2012-03-31 0:00AM', 380 ] ]
],
{
axes:{
xaxis:{
renderer: jQuery . jqplot . DateAxisRenderer,
tickOptions:{
formatString: '%D'
},
}
},
cursor:{
show: true,
zoom: true
}
}
);
} );
</script>

axes

軸に関するオプション。

xaxis

X軸に関するオプション。

renderer

jQuery . jqplot . DateAxisRenderer： X軸を時間軸として扱う。

tickOptions

目盛りラベルに関するオプション。

formatString

目盛りのラベルの形式を指定。

%D： %m/%d/%yへのショートカット。「月/日/年」。

cursor

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

show: カーソルを表示するか。「true」を指定すると表示。「false」を指定すると非表示。
zoom: ズーム（拡大縮小）機能を有効にするか。「true」を指定すると、ズーム機能が有効になる。「false」を指定すると、ズーム機能が無効になる。初期設定値は「false」。

HTML

<div id="jqPlot-sample" style="height: 300px; width: 500px;"></div>

カテゴリー: cursor, dateAxisRenderer, JavaScript, jqPlot, jQuery, グラフ、チャート, プラグイン, 線グラフパーマリンク