所以我正在尝试学习vis js,这是关于时间轴滚动模式选项的例子。代码是在示例文件中,我没有编辑它,但它似乎只输出html部分,因为没有时间轴出现,我不知道这是否是它想要做的。
<html>
<head>
<title>Timeline | rolling mode Option</title>
<meta charset="utf-8">
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1><i id="icon">⛶</i>Timeline rolling mode option</h1>
<div id="mytimeline"></div>
<script>
var container = document.getElementById('mytimeline');
var items = new vis.DataSet();
for (var i = 10; i >= 0; i--) {
items.add({
id: i,
content: "item " + i,
start: new Date(new Date().getTime() + i*100000)
});
}
// Configuration for the Timeline
// specify options
var options = {
start: new Date(),
end: new Date(new Date().getTime() + 1000000),
rollingMode: {
follow: true,
offset: 0.5
}
};
// create a Timeline
var timeline = new vis.Timeline(container, items, options);
console.log(items);
</script>
</body>
</html>
这是我运行时的输出。 Output
它工作正常,但组件的可见性属性设置为脚本的某些部分“隐藏”。如果在DevTools See screenshot中禁用此属性,则可以看到它
截至本文撰写时(v4.21.0),这是GitHub问题列表(https://github.com/almende/vis/issues/3616)中的一个漏洞。
如果您将'rtl'选项明确设置为false,则有一种解决方法。
var options = {
rollingMode: {
follow:true,
offset:0.5
},
rtl:false
};
我不知道为什么解决方法有效,但它确实适用于我上面提到的版本(v4.21.0)。