使用 vis.js 建立時間軸

時間軸 UI 用過幾個，這次是想要一個可以作區間的但又不是像 full calendar 那麼複雜的介面，類似甘特圖的 UI，找來找去就找到這個 vis.js，但他不止能做時間軸，還可以做類似心智圖或其他圖表的功能，這邊先就時間軸來說明一下。

一樣將 js 跟 css 讀入後，像這樣使用就可以了。

view plaincopy to clipboardprint

1. var container = document.getElementById('visualization');   
2.   
3.   // Create a DataSet (allows two way data-binding)   
4.   var items = new vis.DataSet([   
5.     {id: 1, content: 'item 1', start: '2013-04-20'},   
6.     {id: 2, content: 'item 2', start: '2013-04-14'},   
7.     {id: 3, content: 'item 3', start: '2013-04-18'},   
8.     {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},   
9.     {id: 5, content: 'item 5', start: '2013-04-25'},   
10.     {id: 6, content: 'item 6', start: '2013-04-27'}   
11.   ]);   
12.   
13.   // Configuration for the Timeline   
14.   var options = {};   
15.   
16.   // Create a Timeline   
17.   var timeline = new vis.Timeline(container, items, options);  

其中 content 是用來放要顯示的內容，有 start 跟 end 的話就會顯示一個區間，只有 start 的話就會顯示一個點，區間是包含時分秒的，也就是如果給到幾點幾分幾秒，會在時間軸上算到一個位置把點放上去。

option 那邊可以設定時間軸的樣子。

view plaincopy to clipboardprint

1. var options = {   
2.   width: '100%',   
3.   height: '30px',   
4.   margin: {   
5.     item: 20   
6.   }   
7. };  

預設的時間軸是你上面有多少內容，他會一次顯示給你看，如果上面太多東西一次看到的範圍就會太大而且會包含已經發生過的事情，所以如果想要設定開始時間跟範圍的話，可以像這樣給一個 start 的值。

view plaincopy to clipboardprint

1. var options = {   
2.         start: yourtime,   
3. };  

更多文件及設定資料可以看官方說明

我有把它用在 Pokemon GO 活動列表上