TimelinejQuery Plugin

概要

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

テンプレート

サンプル

変更履歴

ライセンス

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秒