Question

我使用vis.js来显示时间表。

我有以下项目：

var items = new vis.DataSet([
  {id: 1, content: '1) Next To 2', start: '2014-04-20 00:00:00', end : '2014-04-20 00:59:59'},
  {id: 2, content: '2) Next To 1', start: '2014-04-20 01:00:00', end : '2014-04-20 02:59:59'},
  {id: 3, content: 'Underneath   ', start: '2014-04-20 00:00:00', end : '2014-04-20 05:59:59'}
]);

id 1和id 2开始/结束彼此不重叠（按时间）。所以我始终希望它们出现在时间轴内的同一行，而不管缩放级别如何。

但我无法设置stack : false，因为我希望id : 3位于1和2之下。

这是一个JSFiddle：http://jsfiddle.net/uqn6q4jd/17/

1）和2）应始终在同一条线上， 3）总是在

下面

无论如何我能完成这个吗？

我看过Vis JS的源代码，觉得我可以通过改动来实现我所需要的：

exports.stack = function...
exports.nostack = function...

如果我缺少的设置或功能将是我做出更改的首选路线......

Answer 1

我目前正在与vis合作并遇到类似的问题。如果范围不重叠且不是太小，则删除水平项边距应该没问题：

var options = {
    margin: {
        item : {
            horizontal : 0
        }
    }
};

如果缩小太远，它们仍会开始堆叠。每组堆叠选项为a requested feature，一旦实施，也可能会执行您想要的操作。

Answer 2

您应该（现在）能够通过子组来实现这一目标。

当堆叠关闭时，子组仍然可以有效地堆叠（但是当你缩小等时不要折叠回来，所以它们只是“分成行”而不是通过实际管理动态堆叠功能）。

您需要通过an overlap check预先计算您的子群，这可能会因您的数据而变得复杂。

特别针对您的示例1＆amp; 2将在子组1中，而第3项在子组2中。子组排序将确保sg2低于sg1。

var items = new vis.DataSet([
  {id: 1, subgroup:1, content: '1) Next To 2', start: '2014-04-20 00:00:00', end : '2014-04-20 00:59:59'},
  {id: 2, subgroup:1, content: '2) Next To 1', start: '2014-04-20 01:00:00', end : '2014-04-20 02:59:59'},
  {id: 3, subgroup:2, content: 'Underneath   ', start: '2014-04-20 00:00:00', end : '2014-04-20 05:59:59'}
]);

子组为documented here

子组排序为documented here

我刚刚使用这种方法作为一种解决方法来实现每组堆叠/或不是，正如@Kazua帮助指出的那样，仍然是一个请求的功能。

Answer 3

var options = {
    margin: {
        item : {
            horizontal : -1
        }
    }
};

我使用了-1，所以你不必放大来看它堆叠

Answer 4

对于将来遇到此问题的任何人。

如果项目不重叠并且同时或几乎同时开始，我只需将堆叠打开并在水平边距选项上设置-25。

margin: {
        item: 0,
        axis: 0,
        item : {
          horizontal : -25
        }
    },

这反过来将所有项目放在不相交的同一行上，如果项目重叠则堆叠。

我也在使用vis.js - Timeline Version:4.19.1。

vis.js时间轴，不要叠加没有时间重叠的项目

4 个答案: