垂直对齐范围

Question

我有一个 vis.js 时间轴，我想对齐范围，以便它显示在两行而不是 4 行上。

我找不到允许我这样做的选项，我已经尝试使用 stack: false 但是所有范围都是堆叠的，我失去了可见性在不同的范围内。

我能做到吗？如果是，如何？

这是我现在拥有的：

var groups = new vis.DataSet([
    {id: 2, content: 'Foo'}
  ]);

  var id = 0;

  var items = new vis.DataSet([
    {id: id++, content: 'Charles',                  className:'bg-success', editable: { updateTime: false, updateGroup: true, remove: false }, start: '2018-02-13T18:00:00', end: '2018-02-13T20:00:00', group: 2},
    {id: id++, content: '',                  className:'bg-danger', editable: { updateTime: false, updateGroup: true, remove: false }, start: '2018-02-13T18:00:00', end: '2018-02-13T20:00:00', group: 2},
    {id: id++, content: 'Flavie, Vincent',          className:'bg-warning', editable: { updateTime: true, updateGroup: true, remove: false }, start: '2018-02-13T20:00:00', end: '2018-02-14T08:00:00', group: 2},
    {id: id++, content: 'Nathan',                   className:'bg-success', editable: { updateTime: true, updateGroup: true, remove: false }, start: '2018-02-13T20:00:00', end: '2018-02-14T08:00:00', group: 2},
  ]);

  var container = document.getElementById('visualization');
  var options = {
    editable: true,
    zoomable : false,
    start: new Date(2018,1,13,12,0,0),
    end: new Date(2018,1,14),
  };

  var timeline = new vis.Timeline(container, items, groups, options);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

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

这是我想要得到的：

Answer 1

stack: false 是一个正确的选项，但您还需要正确 group（或 subgroup）您的项目。请参阅下面的代码段：

var options = {
    stack: false,
    editable: true,
    zoomable : false,
    start: new Date(2018,1,13,12,0,0),
    end: new Date(2018,1,14),
};

var groups = new vis.DataSet([
    {id: 1, content: 'Bar'},
    {id: 2, content: 'Foo'}
]);

var id = 0;

var items = new vis.DataSet([
    {id: id++, content: '', className:'bg-danger', editable: { updateTime: false, updateGroup: true, remove: false }, start: '2018-02-13T18:00:00', end: '2018-02-13T20:00:00', group: 1},
    {id: id++, content: 'Nathan', className:'bg-success', editable: { updateTime: true, updateGroup: true, remove: false }, start: '2018-02-13T20:00:00', end: '2018-02-14T08:00:00', group: 1},
    {id: id++, content: 'Charles', className:'bg-success', editable: { updateTime: false, updateGroup: true, remove: false }, start: '2018-02-13T18:00:00', end: '2018-02-13T20:00:00', group: 2},
    {id: id++, content: 'Flavie, Vincent', className:'bg-warning', editable: { updateTime: true, updateGroup: true, remove: false }, start: '2018-02-13T20:00:00', end: '2018-02-14T08:00:00', group: 2},
]);

var container = document.getElementById('visualization');
var timeline = new vis.Timeline(container, items, groups, options);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

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

<body>
  <div id="visualization"></div>
</body>

垂直对齐范围

Align range vertically

javascript

css

vis.js

vis.js-timeline