Timeline
jQuery Plugin

概要

Webページに時間軸バーを簡単に組み込む事が出来るjqueryプラグインです。

テンプレート

サンプル

変更履歴

  • 2021年01月26日 バージョン1.8.0リリース
    • 摘み(ポインタ)上でマウスホイール操作をした際、currentTimeが変わらないようになりました。
    • disableZoomをtrueに設定した際、 ズーム操作時(ダブルクリックやマウスホイール操作時)にcurrentTimeが変わらないようになりました。
  • 2020年08月05日 バージョン1.7.0リリース
    • オプションにpickDoubleTapが追加され、摘み(ポインタ)をダブルクリック(ダブルタップ)した際に呼び出されるコールバック関数を指定出来るようになりました。
  • 2020年07月30日 バージョン1.6.0リリース
    • オプションにpickTapHoldが追加され、摘み(ポインタ)を長押しした際に呼び出されるコールバック関数を指定出来るようになりました。
    • オプションのrangeMoveStart、rangeMove、rangeMoveEnd、rangeChangeの各コールバック関数の引数オブジェクトの中身が、startTime、endTimeからrangeStartTime、rangeEndTimeに変わりました。
  • 2020年07月22日 バージョン1.5.0リリース
    • レンジバーが表示中の場合、startメソッドはレンジバーの範囲内で自動スクロールするようになりました。
    • 摘み(ポインタ)およびレンジバーが表示可能範囲を超えて移動してしまう不具合を修正しました。
  • 2020年07月17日 バージョン1.4.0リリース
    • showRangeBarメソッド、hiddenRangeBarメソッドが追加され、ユーザが任意の期間を操作出来るレンジバーを描画出来るようになりました。
    • オプションにrangeStartTime、rangeEndTimeが追加され、レンジバーの開始日時、終了日時が指定出来るようになりました。
    • オプションにrangeMoveStart、rangeMove、rangeMoveEnd、rangeChangeが追加され、レンジバーのドラッグ開始、ドラッグ中、ドラッグ終了、任意期間変更時に呼び出されるコールバック関数を指定出来るようになりました。
  • 2020年06月23日 バージョン1.3.1リリース
    • labelPositionを"range"に設定した際のラベル表示の一部不具合を修正しました。
    • syncPickAndBarをtrueに設定した際の動作不具合を修正しました。
  • 2020年06月19日 バージョン1.3.0リリース
    • オプションにclickBarToMovePickが追加され、時間軸バーをクリックした時に摘み(ポインタ)をクリックした位置に移動出来るようになりました。
    • オプションにlabelPositionが追加され、時間軸バー上に表示される日時の位置を指定出来るようになりました。
  • 2020年05月22日 バージョン1.2.1リリース
    • 和暦表示の不具合を修正しました。
  • 2019年11月27日 バージョン1.2.0リリース
    • オプションにzoomStart、zoom、zoomEndが追加され、ズーム開始、ズーム中、ズーム終了時に呼び出されるコールバック関数を指定出来るようになりました。
    • createメソッドの引数にdurationが追加され、再描画時にアニメーション効果を与える事が出来るようになりました。(createメソッドの各引数は一つのオブジェクト形式に収めるよう変更されました)
  • 2019年11月13日 バージョン1.1.0リリース
    • オプションにsyncPickAndBarが追加され、時間軸バーと摘み(ポインタ)が同期して左右にドラッグ出来るようになりました。
    • オプションにrailClickが追加され、摘み(ポインタ)が左右に動くレール上をクリックした時に呼び出されるコールバック関数を指定出来るようになりました。
    • オプションにpickMoveStart、pickMove、pickMoveEndが追加され、摘み(ポインタ)のドラッグ開始、ドラッグ中、ドラッグ終了時に呼び出されるコールバック関数を指定出来るようになりました。
    • オプションにbarMoveStart、barMove、barMoveEndが追加され、時間軸バーのドラッグ開始、ドラッグ中、ドラッグ終了時に呼び出されるコールバック関数を指定出来るようになりました。
    • コンストラクタおよびcreateメソッドの引数にコールバック関数が追加され、時間軸バーの初期生成後や再描画後に行いたい処理を指定出来るようになりました。
    • getTimeFromOffsetメソッドが追加され、オフセット座標から時間軸バー上の日時が取得出来るようになりました。
    • getOffsetFromTimeメソッドが追加され、日時から時間軸バー上のオフセット座標が取得出来るようになりました。
  • 2019年08月30日 バージョン1.0.0(初版)リリース

ライセンス

BSD2

主な機能

  • 左端の日時、右端の日時、摘み(ポインタ)の日時を任意に指定して時間軸バーを描画出来ます。
  • 時間軸バーや摘み(ポインタ)は左右にドラッグ出来ます。
  • マウスの左ダブルクリックでズームイン、右クリックでズームアウト出来ます。
  • マウスホイールでズームイン・アウト出来ます。
  • タッチデバイスではピンチ操作でズームイン・アウト出来ます。
  • 再生機能で自動スクロールが出来ます。

導入方法

1.下記ライブラリをダウンロードする。

jquery-k2go-timeline.cssとjquery-k2go-timeline-pick.pngは同じディレクトリに配置して下さい

jquery-k2go-timeline.js
ダウンロード
jquery-k2go-timeline.css
ダウンロード
jquery-k2go-timeline-pick.png
ダウンロード
License.txt
ダウンロード

2.jquery(Ver3.4.1以上)とダウンロードしたライブラリをHTMLファイルへ組み込む。

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="jquery-k2go-timeline.js"></script>
  <link type="text/css" href="jquery-k2go-timeline.css" rel="stylesheet">
</head>
<body>
  ・・・
</body>
</html>

3.windowオブジェクトのload完了後、時間軸バーを組み込みたい要素へ実装する。

$(window).on("load", function()
{
  $(セレクタ).k2goTimeline(オプション, function(pTimeInfo)
  {
    // 時間軸バー生成後に読みだされるコールバック関数です。指定は任意です。
    // pTimeInfo.  startTimeから左端の日時を取得
    // pTimeInfo.    endTimeから右端の日時を取得
    // pTimeInfo.currentTimeから摘み(ポインタ)の日時を取得
  });
});

オプション

名前 初期値 説明
startTime Date 今日の0時0分0秒 時間軸バーの左端の日時。
endTime Date 今日の23時59分59秒 時間軸バーの右端の日時。
currentTime Date 現在日時 時間軸バーの摘み(ポインタ)の日時。
minTime Date 現在より100年前の日時 時間軸バーの過去方向への表示可能範囲。
maxTime Date 現在より100年後の日時 時間軸バーの未来方向への表示可能範囲。
rangeStartTime Date undefined レンジバーの左端の日時。
rangeEndTime Date undefined レンジバーの右端の日時。
timezoneOffset Number OSのロケール値(JSTなら540) 協定世界時 (UTC) までのタイムゾーンの差。単位は分。この値に基づき日時を表記します。
jpCalendar Boolean false trueに設定すると日時が和暦表示になります(通常は西暦表示)。
minScale Number 1 1ピクセル辺りの最小時間幅。単位はミリ秒。1ピクセル辺りの時間幅が、この値以下にはズームインしません。
maxScale Number 5184000000(60日) 1ピクセル辺りの最大時間幅。単位はミリ秒。1ピクセル辺りの時間幅が、この値以上にはズームアウトしません。
disableMoveBar Boolean false trueに設定すると時間軸バーの左右へのドラッグ機能が無効になります。
disableZoom Boolean false trueに設定すると時間軸バーのズーム機能が無効になります。
syncPickAndBar Boolean false trueに設定すると時間軸バーと摘み(ポインタ)が同期して左右にドラッグするようになります。
clickBarToMovePick Boolean false trueに設定すると時間軸バーをクリックした時に摘み(ポインタ)がクリックした位置に移動するようになります。
labelPosition String "point" "point"に設定すると時間軸バー上のラベルは各日時の真下に表示されます。"range"に設定すると時間軸バー上のラベルは各日時間隔の中央に表示されます。
【例】年単位にラベルが表示される場合、"point"に設定すると「2020」は2020年1月1日の真下、「2021」は2021年1月1日の真下に表示されます。"range"に設定すると「2020」は2020年1月1日~2020年12月31日の中央、「2021」は2021年1月1日~2021年12月31日の中央に表示されます。
pickLineDistance Object {element:$("body"),position:"top"} 摘み(ポインタ)から表示される垂直線の到達点を設定します。elementには対象要素のjqueryオブジェクトを指定します。positionには"top"または"bottom"を指定します。摘み(ポインタ)から表示される垂直線はelementで指定された要素の上端("top")または下端("bottom")まで表示されます。
timeChange Function undefined 日時が変更される度に呼び出されるコールバック関数です。引数のオブジェクトよりstartTime、endTime、currentTimeが取得出来ます。
railClick Function undefined 摘み(ポインタ)が左右に動くレール上をクリックした際に呼び出されるコールバック関数です。引数のオブジェクトよりstartTime、endTime、currentTimeが取得出来ます。
pickMoveStart Function undefined 摘み(ポインタ)のドラッグが開始された際に呼び出されるコールバック関数です。引数のオブジェクトよりstartTime、endTime、currentTimeが取得出来ます。
pickMove Function undefined 摘み(ポインタ)がドラッグされる度に呼び出されるコールバック関数です。引数のオブジェクトよりstartTime、endTime、currentTimeが取得出来ます。
pickMoveEnd Function undefined 摘み(ポインタ)のドラッグが終了した際に呼び出されるコールバック関数です。引数のオブジェクトよりstartTime、endTime、currentTimeが取得出来ます。
pickTapHold Function undefined 摘み(ポインタ)を長押しした際に呼び出されるコールバック関数です。引数のオブジェクトよりstartTime、endTime、currentTimeが取得出来ます。
pickDoubleTap Function undefined 摘み(ポインタ)をダブルクリック(ダブルタップ)した際に呼び出されるコールバック関数です。引数のオブジェクトよりstartTime、endTime、currentTimeが取得出来ます。
また、ダブルクリックの場合は引数のオブジェクトよりマウスボタン情報が取得出来ます。値は左ボタンの場合が1、右ボタンの場合が-1となります(ダブルタップの場合は常に1)。
※注意※
摘み(ポインタ)をダブルクリック(ダブルタップ)した際のデフォルト動作はズームですが、このpickDoubleTapオプションを指定すると摘み(ポインタ)をダブルクリック(ダブルタップ)した際はズームされなくなります。
barMoveStart Function undefined 時間軸バーのドラッグが開始された際に呼び出されるコールバック関数です。引数のオブジェクトよりstartTime、endTime、currentTimeが取得出来ます。
barMove Function undefined 時間軸バーがドラッグされる度に呼び出されるコールバック関数です。引数のオブジェクトよりstartTime、endTime、currentTimeが取得出来ます。
barMoveEnd Function undefined 時間軸バーのドラッグが終了した際に呼び出されるコールバック関数です。引数のオブジェクトよりstartTime、endTime、currentTimeが取得出来ます。
zoomStart Function undefined ズームが開始された際に呼び出されるコールバック関数です。引数のオブジェクトよりstartTime、endTime、currentTimeが取得出来ます。ズームは
zoom Function undefined ズーム中に呼び出されるコールバック関数です。引数のオブジェクトよりstartTime、endTime、currentTimeが取得出来ます。
zoomEnd Function undefined ズームが終了した際に呼び出されるコールバック関数です。引数のオブジェクトよりstartTime、endTime、currentTimeが取得出来ます。
rangeMoveStart Function undefined レンジバーのドラッグが開始された際に呼び出されるコールバック関数です。引数のオブジェクトよりrangeStartTime、rangeEndTimeが取得出来ます。
rangeMove Function undefined レンジバーがドラッグされる度に呼び出されるコールバック関数です。引数のオブジェクトよりrangeStartTime、rangeEndTimeが取得出来ます。
rangeMoveEnd Function undefined レンジバーのドラッグが終了した際に呼び出されるコールバック関数です。引数のオブジェクトよりrangeStartTime、rangeEndTimeが取得出来ます。
rangeChange Function undefined レンジバーの日時が変更される度に呼び出されるコールバック関数です。引数のオブジェクトよりrangeStartTime、rangeEndTimeが取得出来ます。
コンストラクタの例
var date = new Date();

$(セレクタ).k2goTimeline(
{
  startTime   : new Date(date.getFullYear()    , date.getMonth()    ,  1), // 左端の日時を今月の01日に設定
  endTime     : new Date(date.getFullYear()    , date.getMonth() + 1,  1), // 右端の日時を翌月の01日に設定
  currentTime : new Date(date.getFullYear()    , date.getMonth()    , 16), // 摘み(ポインタ)の日時を今月の16日に設定
  minTime     : new Date(date.getFullYear()    ,                   0,  1), // 過去方向への表示可能範囲を今年の1月1日に設定
  maxTime     : new Date(date.getFullYear() + 1,                   0,  1), // 未来方向への表示可能範囲を翌年の1月1日に設定
  timeChange  : function(pTimeInfo)
  {
    // pTimeInfo.  startTimeから左端の日時を取得
    // pTimeInfo.    endTimeから右端の日時を取得
    // pTimeInfo.currentTimeから摘み(ポインタ)の日時を取得
  },
  pickDoubleTap : function(pTimeInfo, pWhich)
  {
    // pTimeInfo.  startTimeから左端の日時を取得
    // pTimeInfo.    endTimeから右端の日時を取得
    // pTimeInfo.currentTimeから摘み(ポインタ)の日時を取得
    // pWhichの値は、1が左ボタン、-1が右ボタンをクリック
  },
  rangeChange : function(pTimeInfo)
  {
    // pTimeInfo.rangeStartTimeからレンジバーの左端の日時を取得
    // pTimeInfo.  rangeEndTimeからレンジバーの右端の日時を取得
  }
});

メソッド

create

説明 指定した日時情報で時間軸バーを再描画します。
構文 $(セレクタ).k2goTimeline("create"[, 引数]);
引数
名前 初期値 説明
timeInfo Object undefined minTime、maxTime、startTime、endTime、currentTimeの日時情報を含むObject。日時を変更せず再描画したい場合は指定不要。
duration Number 1 時間軸バーを再描画する際のアニメーション時間。単位はミリ秒。アニメーションせず再描画したい場合は指定不要。
callback Function undefined 時間軸バーの再描画後に呼び出されるコールバック関数。引数のオブジェクトよりstartTime、endTime、currentTimeが取得出来ます。
戻り値 jqueryオブジェクト
実装例
$(セレクタ).k2goTimeline("create",
{
  timeInfo :
  {
    minTime     : 最小日時,
    maxTime     : 最大日時,
    startTime   : 左端日時,
    endTime     : 右端日時,
    currentTime : 摘み(ポインタ)日時
  },
  duration : 500,
  callback : function(pTimeInfo)
  {
    // pTimeInfo.  startTimeから左端の日時を取得
    // pTimeInfo.    endTimeから右端の日時を取得
    // pTimeInfo.currentTimeから摘み(ポインタ)の日時を取得
  }
});

zoomIn

説明 摘み(ポインタ)の位置を基点に時間軸バーをズームインします。
構文 $(セレクタ).k2goTimeline("zoomIn");
引数 無し
戻り値 jqueryオブジェクト

zoomOut

説明 摘み(ポインタ)の位置を基点に時間軸バーをズームアウトします。
構文 $(セレクタ).k2goTimeline("zoomOut");
引数 無し
戻り値 jqueryオブジェクト

showRangeBar

説明 指定した日時情報でレンジバーを描画します。
構文 $(セレクタ).k2goTimeline("showRangeBar"[, 引数]);
引数
名前 初期値 説明
rangeStartTime Date undefined レンジバーの左端の日時。日時を変更しない場合(オプションで指定済みの場合)は指定不要。
rangeEndTime Date undefined レンジバーの右端の日時。日時を変更しない場合(オプションで指定済みの場合)は指定不要。
戻り値 jqueryオブジェクト
実装例
$(セレクタ).k2goTimeline("showRangeBar",
{
  rangeStartTime : レンジバー左端日時,
  rangeEndTime   : レンジバー右端日時
});

hiddenRangeBar

説明 レンジバーを非表示にします。
構文 $(セレクタ).k2goTimeline("hiddenRangeBar");
引数 無し
戻り値 jqueryオブジェクト

start

説明 時間軸バーの自動スクロールを開始します。
構文 $(セレクタ).k2goTimeline("start", 引数);
引数
名前 初期値 説明
realTime Boolean false trueの場合、リアルタイム再生になります(loopとspeedの値は無視されます)。
falseの場合、摘み(ポインタ)が指し示す時間軸バーの日時から自動スクロールが開始されます(レンジバーが表示中の時はレンジバーの期間内に摘み(ポインタ)が移動します)。
loop Boolean false trueの場合、レンジバーが表示中の時はレンジバーの期間(rangeStartTimeからrangeEndTime)、レンジバーが非表示の時は表示可能範囲(minTimeからmaxTime)の間でループ再生になります。
falseの場合、レンジバーが表示中の時はレンジバーの期間(rangeStartTimeまたはrangeEndTime)、レンジバーが非表示の時は表示可能範囲(minTimeまたはmaxTime)に到達すると自動スクロールは停止します。
fps Number 10 1秒間の描画回数です。値が小さいとスクロールの動きが粗くなり、値が大きいとスクロールの動きが滑らかになります。
speed Number 10 1秒間に移動するピクセル数です。値が小さいとスクロールが遅く、値が大きいとスクロールが速くなります。負の値を指定すると過去方向(左から右)へスクロールします。
stop Function undefined 自動スクロールが停止した時に呼び出されるコールバック関数です。
戻り値 jqueryオブジェクト
実装例
$(セレクタ).k2goTimeline("start",
{
  fps   :   5,       // 1秒間に5回描画
  speed : 100,       // 1秒間に100ピクセル移動
  stop  : function()
  {
    // 自動スクロール停止時の処理
  }
});

stop

説明 時間軸バーの自動スクロールを停止します。
構文 $(セレクタ).k2goTimeline("stop");
引数 無し
戻り値 jqueryオブジェクト

getTimeFromOffset

説明 オフセット座標から時間軸バー上の日時を取得します。
構文 $(セレクタ).k2goTimeline("getTimeFromOffset", 引数);
引数 日時を取得したい位置のオフセット座標(X座標)
戻り値 指定したオフセット座標(X座標)の日時(Dateオブジェクト)

getOffsetFromTime

説明 日時から時間軸バー上のオフセット座標を取得します。
構文 $(セレクタ).k2goTimeline("getOffsetFromTime", 引数);
引数 オフセット座標(X座標)を取得したい日時(Dateオブジェクト)
戻り値 指定した日時のオフセット座標(X座標)

setOptions

説明 オプションの設定変更を行います。
構文 $(セレクタ).k2goTimeline("setOptions", 引数);
引数 変更したいオプション値を含むObject
戻り値 jqueryオブジェクト
実装例
$(セレクタ).k2goTimeline("setOptions",
{
  timezoneOffset : 0,    // タイムゾーンをUTCに設定
  disableMoveBar : true, // 時間軸バーのドラッグ機能を無効に設定
  disableZoom    : true  // 時間軸バーのズーム機能を無効に設定
});

getOptions

説明 オプション値を取得します。
構文 $(セレクタ).k2goTimeline("getOptions");
引数 無し
戻り値 現在のオプション値を含むObject
実装例
var options = $(セレクタ).k2goTimeline("getOptions");

// options.  startTimeから左端の日時を取得
// options.    endTimeから右端の日時を取得
// options.currentTimeから摘み(ポインタ)の日時を取得

formatDate

説明 日時を指定した書式で文字列変換します。
構文 $(セレクタ).k2goTimeline("formatDate", 日時, 書式[, オフセット]);
引数
名前 初期値 説明
日時 Date 必須 文字列変換したいDateオブジェクト。
書式 String 必須
%jp 年(和暦)
%y 年(西暦4桁)
%m 月( 1~12)
%mm 月(01~12)
%d 日( 1~31)
%dd 日(01~31)
%H 時(00~24)
%M 分(00~59)
%S 秒(00~59)
%N ミリ秒(000~999)
オフセット Number OSのロケール値(JSTなら540) 協定世界時 (UTC) までのタイムゾーンの差。単位は分。この値に基づき日時を表記します。
戻り値 日時文字列
実装例
var date   = new Date(2019, 0, 1, 2, 3, 4);
var string = $(セレクタ).k2goTimeline("formatDate", date, "%y年%mm月%dd日 %H時%M分%S秒");

console.log(string); // -> 2019年01月01日 02時03分04秒