visjs时间线-设置项目的初始垂直位置

Question

我使用vis-timeline来呈现100行数据。当组件加载时，我希望看到从开头开始的行: 1、2、3等等。相反，默认情况下，vis-timeline首先显示列表的末尾(...97，98、99、100)，这样您必须向上滚动才能到达顶部？

有像setWindow()这样的方法来设置水平时间框架，但是垂直位置呢？我已经尝试过HTML方法，但这似乎什么也做不了。

通常，我会在选项中使用orientation: { item: 'top' } }，但是在这种情况下存在一个阻止滚动的错误；它必须设置为'bottom'。

我已经考虑过将组件的方向初始化为'top'，然后一旦它显示，将其设置为'bottom'以允许滚动，但这似乎很麻烦。

有更清洁的解决方案吗？

Answer 1

可以使用order配置选项实现项(组也)的自定义排序函数：

提供了一个自定义排序函数来对项目进行排序。项目的顺序决定了它们的堆叠方式。函数顺序是用两个参数调用的，其中包含要比较的两个项的数据。

警告:谨慎使用。定制订购不适合大量的商品。在加载时，时间线将呈现所有项目一次，以确定其宽度和高度。将此配置中的项数限制为最多几百项。

关于一个例子，见下文：

​

var items = new vis.DataSet();
for (let i=0; i<100; i++) {
  items.add({
    id: i,
    content: 'item ' + i,
    start: new Date(2022, 4, 1),
    end: new Date(2022, 4, 14)
  });
}

var container = document.getElementById('visualization1');
var options = {
  order: function (a, b) {
      return b.id - a.id;
    }
}
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setItems(items);

<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis-timeline-graph2d.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js" rel="script"></script>
<div id="visualization1"></div>

​