Timeline

変更履歴

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（初版）リリース

主な機能

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

導入方法

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秒

Timelineライブラリ開発者向けドキュメント

概要

変更履歴

主な機能

導入方法

オプション

メソッド

create

zoomIn

zoomOut

showRangeBar

hiddenRangeBar

start

stop

getTimeFromOffset

getOffsetFromTime

setOptions

getOptions

formatDate

Timelineライブラリ 開発者向けドキュメント

概要

変更履歴

主な機能

導入方法

オプション

メソッド

create

zoomIn

zoomOut

showRangeBar

hiddenRangeBar

start

stop

getTimeFromOffset

getOffsetFromTime

setOptions

getOptions

formatDate

Timelineライブラリ開発者向けドキュメント