2016-02-19 92 views
0

我希望能夠灰化vis.js時間線的過去。我能夠顯示它:設置過去的背景顏色

var container = document.getElementById('visualization'); 
 

 
var items = new vis.DataSet([]); 
 

 
var timeline = new vis.Timeline(container, items, {});
<script src="http://visjs.org/dist/vis.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.14.0/vis.css"> 
 
<p> 
 
    A basic timeline. You can move and zoom the timeline, and select items. 
 
</p> 
 

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

但我不能找到像在the docvis-past任何類來設置背景色。

我想實現這一點:

enter image description here

回答

1

以備將來參考,只需創建一個沒有內容的項目,在最短的日期爲起點,現在作爲結束:

{id: 'past', content: '', start: new Date(-8640000000000000), end: Date(), type: 'background'} 

這是,工作:

var container = document.getElementById('visualization'); 
 

 
var items = new vis.DataSet([{id: 'past', content: '', start: new Date(-8640000000000000), end: Date(), type: 'background'}]); 
 

 
var options = { 
 
    start: '2016-01-01', 
 
    end: '2016-04-01', 
 
    editable: false 
 
    }; 
 

 
var timeline = new vis.Timeline(container, items, options);
.vis-item.vis-background { 
 
    background-color: rgba(222,222,222,0.5) !important; 
 
} 
 

 
body{ 
 
    background-color:white; 
 
}
<script src="http://visjs.org/dist/vis.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.14.0/vis.css"> 
 

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