Question

所以我试图学习vis js，这个例子关于时间轴滚动模式选项。代码就像在示例文件中一样，我没有编辑它，但它似乎只输出html部分，因为没有出现时间轴，我不知道它是什么＆＃39;我想这样做。

<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">&#9974;</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

Answer 1

它有效，但组件的可见性属性设置为＆＃34;隐藏＆＃34;通过脚本的某些部分。如果您在DevTools See screenshot

中禁用此属性，则可以看到它

Answer 2

在撰写本文时（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）却可以。

vis js timeline滚动模式选项示例不起作用

2 个答案: