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

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 start/end 不相互重叠（时间上）。所以我总是希望它们出现在时间轴的同一行上，而不管缩放级别如何。

但是我无法设置 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

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

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

您需要通过 an overlap check 预先计算您的子组，这可能会变得复杂，具体取决于您的数据。

具体到您的示例 1 和 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

我只是使用这种方法作为实现每个组的变通方法 stacking/or 而不是，正如@Kazua 有益地指出的那样，这仍然是一个请求的功能。

Answer 3

对于以后遇到此问题的任何人。

如果项目不重叠并同时或几乎同时开始，我只是让堆叠保持打开状态，并在水平边距选项上设置 -25。

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

这又将所有不重叠的项目放在同一行，如果项目重叠则堆叠。

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

Answer 4

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

我使用了 -1，因此您无需放大即可看到堆叠的效果

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

vis.js timeline, don't stack items with no time overlap

javascript

vis.js

vis.js-timeline