设置过去的背景颜色
Set past background color
我希望能够将 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 doc 中找不到任何 class 像 vis-past
来设置背景颜色。
我想实现这个:
为了以后的参考,只创建一个没有内容的项目,最短的日期作为开始,现在作为结束:
{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>
我希望能够将 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 doc 中找不到任何 class 像 vis-past
来设置背景颜色。
我想实现这个:
为了以后的参考,只创建一个没有内容的项目,最短的日期作为开始,现在作为结束:
{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>