Timeline

導入方法

1.下記ファイルをダウンロードする。

k2go-timeline.js
k2go-timeline-env.js
k2go-timeline.css
k2go-timeline-img.zip

2.プラグインを取り込みたいHTMLファイルが格納されているフォルダにダウンロードしたプラグインを格納する。
※1.「img.zip」は解凍して使用してください。

フォルダ構成例

  │  
  │  index.html // プラグインを取り込みたいHTMLファイル
  │
  ├─css
  │      index.css       // HTMLファイル用CSSファイル 
  │      k2go-timeline.css       // HTMLファイル用CSSファイル 
  │
  ├─img
  │     「k2go-timeline-img.zip」に格納されていた画像ファイル
  │
  └─js
          index.js           // ユーザカスタムの処理、Timelineのイベント呼び出しを行うためのjavascriptファイル
          k2go-timeline-env.js              // Timeline用設定ファイル
          k2go-timeline.js    // Timelineプラグイン

4.ダウンロードしたプラグイン・ライブラリを使用する為、HTMLファイルへ組み込む。
※ユーザカスタムの処理、Timelineのイベント呼び出しを行うためのjavascriptファイルは「type="module"」で取り込むこと。

例

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

5.HTMLファイルのbody要素内に組み込みたいカスタム要素を実装する。

例

  <body>
    <k2go-timelineheader data-header-position="top"></k2go-timelineheader> // ヘッダー部品用カスタム要素
    <k2go-functionbar></k2go-functionbar> // 再生機能用カスタム要素
    ・・・
    <k2go-timeline></k2go-timeline> // 時間軸用カスタム要素
  </body>

6.ユーザカスタムの処理、Timelineのイベント呼び出しを行うためのjavascriptファイルにTimelineプラグインをimportするコードを追加する。

コード追加例

  import "./k2go-timeline.js";
  document.addEventListener("DOMContentLoaded", () => {
    document.querySelector("k2go-timeline").addEventListener("change", () =>
    {
      // ユーザーカスタム処理
    });
  });

オプション

「env.js」ファイルに定義されているオプション設定値を変更することによりTimelineの処理変更・制御が行える。

名前	型	初期値	説明
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"に設定すると「2024」は2024年1月1日の真下、「2025」は2025年1月1日の真下に表示されます。"range"に設定すると「2024」は2024年1月1日～2024年12月31日の中央、「2025」は2025年1月1日～2025年12月31日の中央に表示されます。
pickLineDistance	Object	"body"	摘み（ポインタ）から表示される垂直線を設定するのに必要な対象要素を指定します。
pickLinePosition	Object	"top"	摘み（ポインタ）から表示される垂直線の到達点を設定します。pickLineDistanceで指定した要素に対しpositionを"top"または"bottom"に指定します。摘み（ポインタ）から表示される垂直線はpickLineDistanceで指定された要素の上端（"top"）または下端（"bottom"）まで表示されます。
creating	Boolean	false	ズームレンジ、時計ボタン、カレンダーアイコンなどのタイムラインバーに操作に関わるイベントの多重起動を防ぐための変数です。
zoomTable	Object	name : "ズームレベルの名称", value: "ズームレベル"	ズームレンジのズームレベルの設定を保存した配列です。値の設定： name:ズームレベルの名称を設定(String)　※ズームレベルが一秒の場合："1sec"など value:ミリ秒単位で値を設定(Number)　※一秒の場合：1000 * 1 【例】zoomTable[{name : " 1 sec" , value : 1000 * 1},{name : "30 sec" , value : 1000 * 30}]
playTable	Object	コマ送り速度	ヘッダー日時の再生をどの間隔で再生するかを設定するための配列です。値の設定：秒間隔で値を設定可能【例】playTable : [0.5, 1, 2, 3, 4, 5]　この場合、0.5秒、1秒、2秒…5秒と値が設定できています。
playTableDefault	Number	2	再生設定のコマ送り速度の初期値を設定する変数です。 playTable配列から値を参照できます。【例】playTable : [0.5, 1, 2, 3, 4, 5]　初期値の2の場合、1を取得することができます。
playSpanTable	Object	コマ送り間隔	ヘッダーの日時の年、月、日、秒などの、どの単位で再生させるかを決める設定を保存した配列です。値の設定：年、月、日、秒などで値を設定可能【例】playSpanTable : [1000 * 1,　1000 * 30,]　この場合、1秒単位、30秒単位で設定することができています。
playSpanTableDefault	Number	3	ヘッダーの日時の、再生設定のコマ送り間隔の初期値を設定する変数です。 playSpanTable配列から値を参照できます。【例】playSpanTable : [1000 * 1,　1000 * 30,]　初期値の2の場合、1000 * 30(30秒単位)を取得することができます。
playInterval	Number	1	playTableの配列から取得した値を保存して処理で使用するための変数です。
frameInterval	Number	1	playSpanTable配列から取得した値を保存して処理で使用するための変数です。
timeoutIdFwd	null		再生しているときの関数を保存しておくための変数です。逆再生や、停止ボタンが押されたときに、再生を停止します。
timeoutIdBack	null		逆再生しているときの関数を保存しておくための変数です。再生や、停止ボタンが押されたときに、逆再生を停止します。
enableHeaderBar	Boolean	true	falseに設定するとヘッダー部品が非表示になります。
enableFunctionBar	Boolean	true	falseに設定すると再生機能部品が非表示になります。
enableHeaderDate	Boolean	true	ヘッダ部品に出力する時刻の表示形式を設定します。falseに設定するとユーザーが定義した形式の時刻が表示されます。
enableNowtime	Boolean	true	現在日時の取得方法を設定します。falseに設定するとユーザーが実装した処理から現在日時を取得します。
enableRealtime	Boolean	true	連動式のリアルタイム取得方法を設定します。falseに設定するとユーザーが実装した処理からリアルタイムを取得します。
disableViewURL	Boolean	true	ViewURLにて表示するURLにパラメータを追加するか設定します。falseに設定するとユーザーが実装した処理からパラメータの取得、URLに追加をします。
pickDoubleTap	Boolean	true	摘み（ポインタ）をダブルクリック（ダブルタップ）した際の処理を設定します。ダブルクリックの場合は「pickDoubleTap」イベントにてマウスボタン情報が取得出来ます。値は左ボタンの場合が1、右ボタンの場合が-1となります（ダブルタップの場合は常に1）。 ※注意※ trueに設定すると摘み（ポインタ）をダブルクリック（ダブルタップ）した際のデフォルト動作はズームですが、falseに設定すると摘み（ポインタ）をダブルクリック（ダブルタップ）した際はズームされなくなります。

オプション設定値変更の例

var Env =
{
  startTime       : new Date((new Date()).getFullYear(), (new Date()).getMonth(), (new Date()).getDate(),  0,  0,  0,   0),
  endTime         : new Date((new Date()).getFullYear(), (new Date()).getMonth(), (new Date()).getDate(), 23, 59, 59, 999),
  currentTime     : new Date(),
  minTime         : new Date((new Date()).getFullYear() - 100,                       0,                      1),
  maxTime         : new Date((new Date()).getFullYear() + 100,                       0,                      1),
  rangeStartTime  : undefined,
  rangeEndTime    : undefined,
  timezoneOffset  : (new Date()).getTimezoneOffset() * -1,
  jpCalendar      : false,
  minScale        : 1,
  maxScale        : 1000 * 60 * 60 * 24 * 60,
  labelPosition   : "point",
  pickLineDistance: "body",
  pickLinePosition: "top",
  // ヘッダ部品表示設定（true:表示, false:非表示）
  enableHeaderBar       : true,
  // 再生機能部品表示設定（true:表示, false:非表示）
  enableFunctionBar     : true,
  // ヘッダ部品時刻表示設定（true:timelineのデフォルト処理, false:timeline外の処理）
  enableHeaderDate      : true,
  // 現在日時取得設定（true:timelineのデフォルト処理, false:timeline外の処理）
  enableNowtime         : true,
  // 連動式のリアルタイム取得設定（true:timelineのデフォルト処理, false:timeline外の処理）
  enableRealtime        : true,
  // ViewURL追加パラメータ設定（true:取得しない, false:timeline外から値を取得）
  disableViewURL        : true,

  // 西暦・和暦表示切替（true:和暦表示, false:西暦表示）
  jpCalendar            : false,
  // 時間軸ドラック制御設定（true:ドラッグ不可, false:ドラッグ可）
  disableMoveBar        : false,
  // ズーム抑制設定（true:抑制, false:非抑制）
  disableZoom           : false,
  // 時間軸ドラック時ピック連動設定（true:連動, false:非連動）
  syncPickAndBar        : true,
  // 時間軸ドラック時ピック移動設定（true:マウスカーソルの位置まで移動, false:ピック移動制御）
  clickBarToMovePick    : false,
  // ポインタをダブルクリック（ダブルタップ）（true:ズーム処理, false:マウスボタンの情報取得）
  pickDoubleTap         : true,
};

メソッド

create

説明

指定した日時情報で時間軸バーを再描画します。

構文

document.querySelector("k2go-timeline").create(引数);

引数

名前	型	初期値	説明
timeInfo	Object	undefined	minTime、maxTime、startTime、endTime、currentTimeの日時情報を含むObject。日時を変更せず再描画したい場合は指定不要。
duration	Number	1	時間軸バーを再描画する際のアニメーション時間。単位はミリ秒。アニメーションせず再描画したい場合は指定不要。
callback	Function	undefined	時間軸バーの再描画後に呼び出されるコールバック関数。

戻り値

無し

実装例

var timeInfo =
{
  minTime     : timeline.minTime,
  maxTime     : timeline.maxTime,
  startTime   : timeline.startTime,
  endTime     : timeline.endTime,
  currentTime : timeline.currentTime
};

document.querySelector("k2go-timeline").create(
  timeInfo,
  duration : 500,
  callback : function()
  {
    document.querySelector("k2go-timeline").startTime;   //左端の日時を取得
    document.querySelector("k2go-timeline").endTime;     //右端の日時を取得
    document.querySelector("k2go-timeline").currentTime; //摘み（ポインタ）の日時を取得
  }
);

zoomIn

説明	摘み（ポインタ）の位置を基点に時間軸バーをズームインします。
構文	document.querySelector("k2go-timeline").zoomIn();
引数	無し
戻り値	無し

zoomOut

説明	摘み（ポインタ）の位置を基点に時間軸バーをズームアウトします。
構文	document.querySelector("k2go-timeline").zoomOut();
引数	無し
戻り値	無し

showRangeBar

説明

指定した日時情報でレンジバーを描画します。

構文

document.querySelector("k2go-timeline").showRangeBar(引数);

引数

名前	型	初期値	説明
rangeStartTime	Date	undefined	レンジバーの左端の日時。日時を変更しない場合は指定不要。
rangeEndTime	Date	undefined	レンジバーの右端の日時。日時を変更しない場合は指定不要。

戻り値

無し

実装例

document.querySelector("k2go-timeline").showRangeBar({
  rangeStartTime : レンジバー左端日時,
  rangeEndTime   : レンジバー右端日時
});

hiddenRangeBar

説明	レンジバーを非表示にします。
構文	document.querySelector("k2go-timeline").hiddenRangeBar();
引数	無し
戻り値	無し

start

説明

時間軸バーの自動スクロールを開始します。

構文

document.querySelector("k2go-timeline").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	自動スクロールが停止した時に呼び出されるコールバック関数です。

戻り値

無し

実装例

document.querySelector("k2go-timeline")start(
{
  fps   :   5,       // 1秒間に5回描画
  speed : 100,       // 1秒間に100ピクセル移動
  stop  : function()
  {
    // 自動スクロール停止時の処理
  }
});

stop

説明	時間軸バーの自動スクロールを停止します。
構文	document.querySelector("k2go-timeline").stop();
引数	無し
戻り値	無し

getTimeFromOffset

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

getOffsetFromTime

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

formatDate

説明

日時を指定した書式で文字列変換します。

構文

document.querySelector("k2go-timeline").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(2024, 0, 1, 2, 3, 4);
var string = document.querySelector("k2go-timeline").formatDate(date, "%y-%mm-%dd %H:%M:%S");

console.log(string); // -> 2024-01-01 02:03:04

startTime

説明	TimelineからstartTimeを取得します。
構文	document.querySelector("k2go-timeline").startTime;
引数	無し
戻り値	startTime（Dateオブジェクト）

endTime

説明	TimelineからendTimeを取得します。
構文	document.querySelector("k2go-timeline").endTime;
引数	無し
戻り値	endTime（Dateオブジェクト）

currentTime

説明	TimelineからcurrentTimeを取得します。
構文	document.querySelector("k2go-timeline").currentTime;
引数	無し
戻り値	currentTime（Dateオブジェクト）

minTime

説明	TimelineからminTimeを取得します。
構文	document.querySelector("k2go-timeline").minTime;
引数	無し
戻り値	minTime（Dateオブジェクト）

maxTime

説明	TimelineからmaxTimeを取得します。
構文	document.querySelector("k2go-timeline").maxTime;
引数	無し
戻り値	maxTime（Dateオブジェクト）

rangeStartTime

説明	TimelineからrangeStartTimeを取得します。
構文	document.querySelector("k2go-timeline").rangeStartTime;
引数	無し
戻り値	rangeStartTime（Dateオブジェクト）

rangeEndTime

説明	TimelineからrangeEndTimeを取得します。
構文	document.querySelector("k2go-timeline").rangeStartTime;
引数	無し
戻り値	rangeStartTime（Dateオブジェクト）

timezoneOffset

説明	現在日時に対するオフセット座標（X座標）を取得します。
構文	document.querySelector("k2go-timeline").timezoneOffset;
引数	無し
戻り値	現在日時に対するオフセット座標（X座標）

adjustCurrentTime

説明	摘み（ポインタ）の調整を行います。 ※使用例：時間軸バーがドラッグ・ズームした際に摘み（ポインタ）の位置調整を行う。
構文	document.querySelector("k2go-timeline").adjustCurrentTime();
引数	無し
戻り値	無し

adjustRangeBar

説明	レンジバーの調整を行います。 ※使用例：時間軸バーがドラッグ・ズームした際にレンジバーを調整する。
構文	document.querySelector("k2go-timeline").adjustRangeBar();
引数	無し
戻り値	無し

イベント

Timeline内の処理完了後に実行されるイベントになります。
イベント内にユーザー独自の処理を実装することが可能です。

イベント内処理追加の例

  document.addEventListener("DOMContentLoaded", () => {
    const timeline = document.querySelector("k2go-timeline");
  
    /*-----* change Event *------------------------------------------------*/
    document.querySelector("k2go-timeline").addEventListener("change", () =>
    {
      // 指定したHTML要素に対し、Timelineから取得した日時を表示する。
      document.querySelector("#min_time     span").innerHTML     = timeline.formatDate(timeline.       minTime, "%y-%mm-%dd %H:%M:%S");
      document.querySelector("#max_time     span").innerHTML     = timeline.formatDate(timeline.       maxTime, "%y-%mm-%dd %H:%M:%S");
      document.querySelector("#start_time   span").innerHTML     = timeline.formatDate(timeline.     startTime, "%y-%mm-%dd %H:%M:%S");
      document.querySelector("#end_time     span").innerHTML     = timeline.formatDate(timeline.       endTime, "%y-%mm-%dd %H:%M:%S");
      document.querySelector("#current_time span").innerHTML     = timeline.formatDate(timeline.   currentTime, "%y-%mm-%dd %H:%M:%S");
    });
  });

名前	説明
change	日時が変更される度に呼び出されるイベントです。
railClick	摘み（ポインタ）が左右に動くレール上をクリックした際に呼び出されるイベントです。
pickMoveStart	摘み（ポインタ）のドラッグが開始された際に呼び出されるイベントです。
pickMove	摘み（ポインタ）がドラッグされる度に呼び出されるイベントです。
pickMoveEnd	摘み（ポインタ）のドラッグが終了した際に呼び出されるイベントです。
pickTapHold	摘み（ポインタ）を長押しした際に呼び出されるイベントです。
barMoveStart	時間軸バーのドラッグが開始された際に呼び出されるイベントです。
barMove	時間軸バーがドラッグされる度に呼び出されるイベントです。
barMoveEnd	時間軸バーのドラッグが終了した際に呼び出されるイベントです。
zoomStart	ズームが開始された際に呼び出されるイベントです。
zoom	ズーム中に呼び出されるイベントです。
zoomEnd	ズームが終了した際に呼び出されるイベントです。
rangeMoveStart	レンジバーのドラッグが開始された際に呼び出されるイベントです。
rangeMove	レンジバーがドラッグされる度に呼び出されるイベントです。
rangeMoveEnd	レンジバーのドラッグが終了した際に呼び出されるイベントです。
rangeChange	レンジバーの日時が変更される度に呼び出されるイベントです。

setCustomData イベント

ヘッダ部品の時刻表示、現在日時・連動式のリアルタイム取得、ViewURLの処理に対し、ユーザー独自の値を取得、渡すことが可能です。
※使用するには「env.js」ファイルに定義されているオプション設定値の変更とカスタムメソッドの実装が必要です。

対象オプション

名前	型	初期値	説明
enableHeaderDate	Boolean	true	ヘッダ部品に出力する時刻の表示形式を設定します。falseに設定するとユーザーが定義した形式の時刻が表示されます。
enableNowtime	Boolean	true	現在日時の取得方法を設定します。falseに設定するとユーザーが実装した処理から現在日時を取得します。
enableRealtime	Boolean	true	連動式のリアルタイム取得方法を設定します。falseに設定するとユーザーが実装した処理からリアルタイムを取得します。
disableViewURL	Boolean	true	ViewURLにて表示するURLにパラメータを追加するか設定します。falseに設定するとユーザーが実装した処理からパラメータの取得、URLに追加をします。

オプション設定値変更の例

var Env =
{
  ・・・
  // ヘッダ部品時刻表示設定（true:timelineのデフォルト処理, false:timeline外の処理）
  enableHeaderDate      : false,
  // 現在日時取得設定（true:timelineのデフォルト処理, false:timeline外の処理）
  enableNowtime         : false,
  // 連動式のリアルタイム取得設定（true:timelineのデフォルト処理, false:timeline外の処理）
  enableRealtime        : fale,
  // ViewURL追加パラメータ設定（true:取得しない, false:timeline外から値を取得）
  disableViewURL        : false,
  ・・・
};

ユーザーカスタムデータ用メソッド

名前	型	戻り値	説明
customTimeString	function	Date	ユーザーが実装した処理から日時と書式を設定し、ヘッダー部品に表示することができます。
appLatestTime	function	Date	ユーザーが実装した処理で取得した値を現在日時、連動式のリアルタイム処理に渡すことができます。
customViewURL	function	String	ユーザーが実装した処理で取得した値をViewURL処理で表示するURLの末尾に結合して表示することができます。

ユーザーカスタムデータ設定の例

  document.addEventListener("DOMContentLoaded", () => {
    const timeline = document.querySelector("k2go-timeline");
    document.querySelector("k2go-timeline").addEventListener("setCustomData", () => 
    {
      document.querySelector("k2go-timeline").setCustom({
        customTimeString: function(){ return /* ヘッダに表示する時刻 */ }, 
        appLatestTime:    function(){ return /* アプリの最新時刻 */ },
        customViewURL:    function(){ return /* ViewURLに追加する文字列 */ },
      });
    });
  });

名前	説明
openCalendar	カレンダーボタンをクリックした際に呼び出されるイベントです。addEventListenerの引数から event.detail でボタンのDOMを取得できます。
selectData	Select Dataボタンをクリックした際に呼び出されるイベントです。addEventListenerの引数から event.detail でボタンのDOMを取得できます。
viewHelp	Helpボタンををクリックした際に呼び出されるイベントです。addEventListenerの引数から event.detail でボタンのDOMを取得できます。

Timelineプラグイン開発者向けドキュメント

概要

変更履歴

主な機能

導入方法

オプション

メソッド

create

zoomIn

zoomOut

showRangeBar

hiddenRangeBar

start

stop

getTimeFromOffset

getOffsetFromTime

formatDate

startTime

endTime

currentTime

minTime

maxTime

rangeStartTime

rangeEndTime

timezoneOffset

adjustCurrentTime

adjustRangeBar

イベント

setCustomData イベント

対象オプション

ユーザーカスタムデータ用メソッド

Timelineヘッダーのイベント

Timelineプラグインのスタイル変更

Timelineプラグイン 開発者向けドキュメント

概要

変更履歴

主な機能

導入方法

オプション

メソッド

create

zoomIn

zoomOut

showRangeBar

hiddenRangeBar

start

stop

getTimeFromOffset

getOffsetFromTime

formatDate

startTime

endTime

currentTime

minTime

maxTime

rangeStartTime

rangeEndTime

timezoneOffset

adjustCurrentTime

adjustRangeBar

イベント

setCustomData イベント

対象オプション

ユーザーカスタムデータ用メソッド

Timelineヘッダーのイベント

Timelineプラグインのスタイル変更

Timelineプラグイン開発者向けドキュメント