垂直对齐范围答案

【问题标题】：Align range vertically垂直对齐范围
【发布时间】：2018-02-13 15:36:45
【问题描述】：

我有一个 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>

这就是我想要的：

【问题讨论】：

标签： vis.js javascript css vis.js vis.js-timeline

【解决方案1】：

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

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>

【讨论】：