vis.jsを使ってシンプルなタイムラインチャートを描く

ブラウザのバージョン履歴を時系列に並べてタイムラインチャートを作りたい。仕上がりは下図のイメージ。このタイムラインチャートは、JavaScriptライブラリーvis.jsのvis-timelineを使って簡単に描くことができました。その作り方の備忘録です。

サンプルのコードはこちら： https://codepen.io/kaz_hashimoto/pen/WNzEord

使用したvis.jsのバージョンはv7.7.0です。

HTML

vis.jsを読み込むための記述です。

html

<link rel="stylesheet" href="https://unpkg.com/vis-timeline@latest/styles/vis-timeline-graph2d.min.css">
<script src="https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"></script>

チャートを埋め込む入れ物のdivを用意します。

html

<div id="visualization"></div>

JavaScript

Itemを定義

タイムラインに表示するデータ系列全部をひっくるめて１つの配列itemsに定義します。

javascript

const items = [
  {group: 'os', content: 'Windows 7', start: '2009-10-22', end: '2020-01-14'},
  /* ... */
  {group: 'ie', content: '8', start: '2009-03-19', type: 'point'},
  /* ... */
  {group: 'firefox', content: '3.0.18', start: '2010-02-17', type: 'point'},
  /* ... */
];

ここで、

property	説明
group	データ系列のグループID(番号 or 文字列)。同じgroupのitemは、チャートの１行に並べられます。
content	項目の表示名
start	期間の開始日、またはイベントの日付
end	期間の終了日。イベントの場合はendを省略
type	表示の形状：box (default) | point
id	項目のID※
title	マウスを項目にホバーした時に表示される文字列※

表の最後の２つの項目（※）は配列に直接記述すると煩雑になるので、forループを使ってitems[]の要素にセットしました。

javascript

for (let i = 0; i < items.length; i++) {
  const o = items[i];
  o.id = i + 1;     // itemにidを付ける（推奨）
  o.title = o.start;  // itemのtooltipで表示されるタイトル
  if (o.end) {
    o.title = `${o.start} - ${o.end}`;
  }
}

Groupを定義

データ系列をGroupとして定義します。

javascript

const groups = [
  {id: 'os', content: 'OS'},
  {id: 'ie', content: 'IE'},
  {id: 'firefox', content: 'Firefox'},
  {id: 'chrome', content: 'Chrome'},
  {id: 'opera', content: 'Opera'},
  {id: 'safari', content: 'Safari'}
];

ここで、

property	説明
id	グループID。この値がitems[]の要素のgroupの値と紐付きます。
content	行見出しに表示される文字列

Timelineのオプション設定

vis.jsが生成したTimeline図はデフォルトの設定ではマウスによるズームが可能で、それに応じて画面内に表示される期間の範囲が自動的に増減します。今回のサンプルは時系列の開始日と終了日が固定であり、情報量も少ないためズーム機能を無効にしました。

javascript

const options = {
  start: '2009-01-01',  // timeline軸が表す期間の範囲の開始日
  end: '2016-12-31',    // （同）範囲の終了日
  zoomable: false,      // timeline chartのzoomを無効にする
  orientation: 'top',   // timeline軸(見出し行）を上側に表示する
  tooltip: {
    delay: 50           // tooltipが表示されるまでのdelay(ms)
  }
};

Timelineの生成

データの準備ができたら最後にvis.Timelineを呼んでTimelineを描画します。

javascript

const container = document.getElementById('visualization');
const timeline = new vis.Timeline(container, items, groups, options);

サンプル図の赤い線のように特定の日付の位置で垂直の線を引くには、addCustomTime()を呼びます。

javascript

timeline.addCustomTime('2014-02-20', 'v-bar');

２番目の引数にCSSのclass名を指定することで線のスタイルをCSSで調整できます。デフォルトのスタイルを上書きするために、CSSにはセレクター.vis-custom-timeを付けてセレクターの詳細度を上げた形式で指定する必要があります。

css

/* 指定の日付の位置に垂直に引く線のスタイル */
.vis-custom-time.v-bar {
  width: 1px;
  background-color: coral;
}

スタイルの調整

デフォルトの表示では、見出し行（年号が表示されているヘッダ）の背景色は設定されていません。ここでは背景色を設定してみます。

css

/* timelineのスタイル */
/* timeline軸（見出し行）の背景色 */
.vis-time-axis.vis-foreground {
  background: #1864ab;
}

/* timeline軸（見出し行）のテキストの色 */
.vis-time-axis .vis-text.vis-minor {
  color: #fff;
}

スタイルを変更したいターゲット要素のセレクターを突き止めるには、Chrome DevToolsのElementsパネルでTimelineのHTML要素を表示して、適用されているCSSをStylesパネルで確認するのが手っ取り早いです。