jQuery の jqPlot プラグインで作るツールチップ機能付き折れ線グラフ

jQueryのjqPlotプラグインで、X軸が時間軸である折れ線グラフにおいて、マウスカーソル(マウスポインタ)の位置のXとYの値を示すツールチップを表示する方法。

実装例(サンプル)

実装例(サンプル)の動作について

グラフにマウスカーソル(マウスポインタ)を合わせると、マウスカーソルの位置のXとYの値を、グラフの右上に表示する。

実装例(サンプル)のソースコード

読み込み

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

<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() {
    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,
                showTooltip: true,
                tooltipLocation: 'ne'
            }
        }
    );
} );
</script>
axes

軸に関するオプション。

xaxis

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

renderer

jQuery . jqplot . DateAxisRendererX軸を時間軸として扱う。

tickOptions

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

formatString

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

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

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

show

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

showTooltip

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

tooltipLocation

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

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

HTML

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

スポンサード リンク

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