如何将vis.js Timeline的时间范围垂直对齐为两行而非四行？

嘿，这个需求完全可以实现！我之前做类似的可视化时刚好研究过vis.js Timeline的分组机制，刚好能解决你的问题～

核心思路 #

我们可以利用vis.js的**分组（Groups）**功能，把需要放在同一行的时间范围归到同一个分组，通过分组的垂直排列来实现两行布局，同时避免stack: false导致的完全重叠问题。

具体实现步骤 #

1. 定义两行对应的分组
   先创建两个分组，分别对应你想要的上下两行。如果不想显示分组标题，可以把content设为空字符串，还能自定义分组高度来调整行间距：

   // 创建分组数据集
   const groups = new vis.DataSet([
     { id: 1, content: '', height: 45 }, // 第一行，隐藏标题
     { id: 2, content: '', height: 45 }  // 第二行，隐藏标题
   ]);
   

2. 将时间范围分配到对应分组
   把你的时间范围数据，按需求分配到两个分组里。如果数量不固定，还可以写个简单逻辑自动分配（比如奇数ID分到第一行，偶数分到第二行）：

   // 创建时间范围数据集
   const items = new vis.DataSet([
     { id: 1, group: 1, content: '项目A', start: '2024-05-01', end: '2024-05-08' },
     { id: 2, group: 1, content: '项目B', start: '2024-05-03', end: '2024-05-10' },
     { id: 3, group: 2, content: '项目C', start: '2024-05-02', end: '2024-05-09' },
     { id: 4, group: 2, content: '项目D', start: '2024-05-04', end: '2024-05-11' }
   ]);
   
   // 自动分配逻辑（如果需要动态处理数据）
   // items.forEach(item => {
   //   item.group = item.id % 2 === 1 ? 1 : 2;
   // });
   

3. 配置Timeline实现无重叠的两行布局
   在配置里关闭自动堆叠，同时设置合理的间距避免元素重叠，确保分组按顺序排列：

   const timelineOptions = {
     stack: false, // 关闭自动堆叠，让同一分组内的元素并排显示
     groupOrder: 'id', // 按分组ID顺序排列，保证第一行在上、第二行在下
     margin: {
       item: 12, // 同一行内元素的水平间距，避免重叠
       axis: 6   // 时间轴与元素的垂直间距
     },
     // 如果需要隐藏分组的边框或调整样式，可以加自定义CSS
     groupStyle: {
       borderWidth: 0
     }
   };
   

4. 初始化Timeline
   最后把分组、数据和配置传入Timeline实例即可：

   const container = document.getElementById('timeline');
   const timeline = new vis.Timeline(container, items, groups, timelineOptions);
   

额外说明 #

• 这种方法完全基于vis.js原生功能，不需要修改源码，所有交互（拖动、点击、编辑）都能正常工作；
• 如果需要更灵活的布局（比如根据时间范围的长度分配行），可以修改分组分配的逻辑，比如把较长的范围分到第一行，较短的分到第二行；
• 要是担心同一行内的元素还是会重叠，可以调整margin.item的数值，或者给元素添加自定义样式设置最小宽度。

内容的提问来源于stack exchange，提问作者Thomas Ayoub