添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

visjs时间线-在同一行中的项目在同一组中

内容来源于 Stack Overflow,遵循 CC BY-SA 4.0 许可协议进行翻译与使用。IT领域专用引擎提供翻译支持

腾讯云小微IT领域专用引擎提供翻译支持

原文
Stack Overflow用户 修改于2022-04-06
  • 该问题已被编辑
  • 提问者: Stack Overflow用户
  • 提问时间: 2022-04-01 10:28

我有一个简单的visjs时间线实例。是否可以将与同一组相关的项目显示在同一行上?

浏览 47 关注 0 得票数 2
  • 得票数为Stack Overflow原文数据
原文
修改于2022-04-04
  • 该回答已被编辑
  • 回答者: Stack Overflow用户
  • 回答时间: 2022-04-03 08:16
得票数 0

您正在寻找 stack 选项,其中:

如果为true (默认),则项目将相互堆叠在一起,使它们不重叠。

因此,您需要在时间线选项中将其设置为 false

下面的示例(从 这里 中取消)显示了当 stack false true 时会发生什么。注意到重叠的项目成为操纵的手段(例如,项目3完全隐藏在第三组中):

  var groups = new vis.DataSet([
    {id: 0, content: 'First', value: 1},
    {id: 1, content: 'Third', value: 3},
    {id: 2, content: 'Second', value: 2}
  // create a dataset with items
  // note that months are zero-based in the JavaScript Date object, so month 3 is April
  var items = new vis.DataSet([
    {id: 0, group: 0, content: 'item 0', start: new Date(2014, 3, 17), end: new Date(2014, 3, 21)},
    {id: 1, group: 0, content: 'item 1', start: new Date(2014, 3, 19), end: new Date(2014, 3, 20)},
    {id: 2, group: 1, content: 'item 2', start: new Date(2014, 3, 16), end: new Date(2014, 3, 24)},
    {id: 3, group: 1, content: 'item 3', start: new Date(2014, 3, 23), end: new Date(2014, 3, 24)},
    {id: 4, group: 1, content: 'item 4', start: new Date(2014, 3, 22), end: new Date(2014, 3, 26)},
    {id: 5, group: 2, content: 'item 5', start: new Date(2014, 3, 24), end: new Date(2014, 3, 27)}
  // create visualization
  var container1 = document.getElementById('visualization1');
  var container2 = document.getElementById('visualization2');
  var options1 = {
    // option groupOrder can be a property name or a sort function
    // the sort function must compare two groups and return a value
    //     > 0 when a > b
    //     < 0 when a < b
    //       0 when a == b
    groupOrder: function (a, b) {
      return a.value - b.value;
    editable: true,
    stack: false
  var options2 = Object.assign({}, options1);
  options2.stack = true;
  var timeline1 = new vis.Timeline(container1);
  timeline1.setOptions(options1);
  timeline1.setGroups(groups);
  timeline1.setItems(items);
  var timeline2 = new vis.Timeline(container2);
  timeline2.setOptions(options2);
  timeline2.setGroups(groups);