Vis.js 如果数据为空,则时间轴不可见
Vis.js Timeline is not visible if data is empty
当我没有数据时,时间线不存在,但我需要一个空的时间线。
在 3.10.0 版本中可以使用,但在 4.21.0
版本中不行
我希望已经清楚了...我在这里举了一个例子:
function setTable(){
var select = document.getElementById("select");
var value = select.options[select.selectedIndex].value;
var container = document.getElementById('mytimeline');
container.innerHTML = "";
if(value=="full"){
var items = new vis.DataSet([
{id: 1, group: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, group: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, group: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, group: 3, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, group: 1, content: 'item 5', start: '2013-04-25'},
{id: 6, group: 1, content: 'item 6', start: '2013-04-27'}
]);
var groups = new vis.DataSet([
{id: 1, content: 'aaa'},
{id: 2, content: 'bbb'},
{id: 3, content: 'ccc'},
{id: 4, content: 'ddd'}
]);
var options = {};
var timeline = new vis.Timeline(container, items, groups, options);
}else if(value=="empty"){
var items = new vis.DataSet();
var groups = new vis.DataSet();
var options = {};
var timeline = new vis.Timeline(container, items, groups, options);
alert("don't work... \n I would like to have an empty TimeLine... not a \nLike I have do it in oldest version (3.10.0)\nhttp://jsfiddle.net/n427qjLm/2/");
}
}
#mytimeline{
border:1px solid gray;
padding : 5px;
}
.vis.timeline .labelset .vlabel .inner {
min-height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet"/>
<select id="select" onchange="setTable()">
<option value="">Select</option>
<option value="full">Full</option>
<option value="empty">Empty</option>
</select>
<div id="mytimeline"></div>
当您想要一个空的时间轴时,您必须在选项中指定 "start":
var options = {
start: '2018-08-20'
};
当我没有数据时,时间线不存在,但我需要一个空的时间线。 在 3.10.0 版本中可以使用,但在 4.21.0
版本中不行我希望已经清楚了...我在这里举了一个例子:
function setTable(){
var select = document.getElementById("select");
var value = select.options[select.selectedIndex].value;
var container = document.getElementById('mytimeline');
container.innerHTML = "";
if(value=="full"){
var items = new vis.DataSet([
{id: 1, group: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, group: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, group: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, group: 3, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, group: 1, content: 'item 5', start: '2013-04-25'},
{id: 6, group: 1, content: 'item 6', start: '2013-04-27'}
]);
var groups = new vis.DataSet([
{id: 1, content: 'aaa'},
{id: 2, content: 'bbb'},
{id: 3, content: 'ccc'},
{id: 4, content: 'ddd'}
]);
var options = {};
var timeline = new vis.Timeline(container, items, groups, options);
}else if(value=="empty"){
var items = new vis.DataSet();
var groups = new vis.DataSet();
var options = {};
var timeline = new vis.Timeline(container, items, groups, options);
alert("don't work... \n I would like to have an empty TimeLine... not a \nLike I have do it in oldest version (3.10.0)\nhttp://jsfiddle.net/n427qjLm/2/");
}
}
#mytimeline{
border:1px solid gray;
padding : 5px;
}
.vis.timeline .labelset .vlabel .inner {
min-height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet"/>
<select id="select" onchange="setTable()">
<option value="">Select</option>
<option value="full">Full</option>
<option value="empty">Empty</option>
</select>
<div id="mytimeline"></div>
当您想要一个空的时间轴时,您必须在选项中指定 "start":
var options = {
start: '2018-08-20'
};