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

ブラウザのバージョン履歴を時系列に並べてタイムラインチャートを作りたい。仕上がりは下図のイメージ。このタイムラインチャートは、JavaScriptライブラリー[vis.js](https://visjs.org/)の[vis-timeline](https://github.com/visjs/vis-timeline)を使って簡単に描くことができました。その作り方の備忘録です。
![version-history-timilne.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/7f4c7294-4346-a7cc-93b6-7a5e4e2db38e.png)
サンプルのコードはこちら： https://codepen.io/kaz_hashimoto/pen/WNzEord

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

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

```html: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:html
<div id="visualization"></div>
```

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

```javascript: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`<br> |
| id | 項目のID※ |
| title | マウスを項目にホバーした時に表示される文字列※ |


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

```javascript: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: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: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:javascript
const container = document.getElementById('visualization');
const timeline = new vis.Timeline(container, items, groups, options);
```

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

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

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

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

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

```css: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パネルで確認するのが手っ取り早いです。