jQuery の jqPlot の折れ線グラフで、コントロール用グラフで拡大範囲を指定

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

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

実装例（サンプル）

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

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

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

読み込み

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

<script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
<!--[if lt IE 9]>
    <script language="javascript" type="text/javascript" src="excanvas.min.js"></script>
<![endif]-->
<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() {
    sampleData = [ [ '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 ] ];
    targetPlot = jQuery . jqplot(
        'jqPlot-sample-targetPlot',
        [
            sampleData
        ],
        {
            axes: {
                xaxis: {
                    renderer: jQuery . jqplot . DateAxisRenderer,
                    tickOptions: {
                        formatString: '%D'
                    },
                },
                yaxis:{
                    min: 0,
                    max: 1000,
                },
            },
            cursor: {
                show: true,
                showTooltip: false,
                zoom: true,
            }
        }
    );
    controllerPlot = jQuery . jqplot(
        'jqPlot-sample-controllerPlot',
        [
            sampleData
        ],
        {
            seriesDefaults: {
                showMarker: false
            },
            axes: {
                xaxis: {
                    renderer: jQuery . jqplot . DateAxisRenderer,
                    tickOptions: {
                        formatString: '%D'
                    },
                },
                yaxis: {
                    min: 0,
                    max: 1000,
                }
            },
            cursor: {
                show: true,
                showTooltip: false,
                zoom: true,
                constrainZoomTo: 'x'
            }
        }
    );
    jQuery . jqplot . Cursor . zoomProxy( targetPlot, controllerPlot );
} );
</script>
プロパティ
seriesDefaults

グラフの種類や、系列の色、太さなど、系列に関する初期設定。

showMarker

系列のマーカーを表示するか。「true」は表示。「false」は非表示。初期設定値は、「true」。

axes

軸に関するオプション。

xaxis

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

renderer

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

tickOptions

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

formatString

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

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

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

min

Y軸上の最小値を指定。

max

Y軸上の最大値を指定。

cursor

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

show

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

showTooltip

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

zoom

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

constrainZoomTo

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

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

HTML

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

スポンサード リンク

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