7

我正在使用 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...

如果我缺少某个设置或功能，那将是我进行更改的首选路线...

4

4 回答 4

11

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

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

但是，如果您缩小得太远，它们仍会开始堆叠。每组堆叠选项是一个请求的功能，一旦实现，它也可能会做你想做的事情。

于 2015-11-17T13:01:06.483 回答
5

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

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

您需要通过重叠检查预先计算您的子组，这可能会根据您的数据变得复杂。

具体到您的示例 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'}
]);

此处记录了子组

此处记录了子组排序

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

于 2016-06-24T09:00:32.097 回答
3 
var options = {
    margin: {
        item : {
            horizontal : -1
        }
    }
};

我使用了-1，因此您不必放大即可看到堆叠

于 2017-12-13T08:49:53.203 回答
0

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

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

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

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

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

于 2017-05-15T18:08:10.917 回答