使用vis-timeline实现项目时间轴的非堆叠布局

在项目管理和时间轴可视化工具vis-timeline中，开发者经常需要展示同一时间段内的多个任务项。默认情况下，这些任务项会以堆叠(stack)的方式垂直排列，但有时我们需要让它们显示在同一水平线上，以便更直观地展示时间重叠关系。

默认堆叠布局的问题

vis-timeline默认启用stack: true选项，这会导致同一时间段内的多个项目垂直堆叠显示。这种布局虽然避免了项目重叠，但会占用更多垂直空间，特别是在项目密集的时间段，会导致时间轴高度急剧增加，影响整体可视化效果。

解决方案：禁用堆叠选项

通过将stack选项设置为false，可以关闭项目的自动堆叠功能，使同一时间段内的项目显示在同一水平线上。这种布局方式特别适合以下场景：

1. 项目持续时间较短且数量较多
2. 需要直观展示时间重叠情况
3. 希望保持时间轴高度一致

实现代码示例

const options = {
  stack: false,  // 关键配置，禁用堆叠
  // 其他配置项...
};

// 创建时间轴实例
const timeline = new vis.Timeline(container, items, groups, options);

实际效果对比

启用堆叠(stack: true)时：

• 项目垂直排列
• 时间轴高度随项目数量增加
• 项目间无重叠

禁用堆叠(stack: false)时：

• 项目水平排列
• 时间轴高度固定
• 项目可能重叠

注意事项

1. 当项目时间完全重叠时，禁用堆叠可能导致项目相互遮挡
2. 可以通过调整项目样式(如透明度)来改善重叠项目的可读性
3. 对于特别密集的时间段，建议结合缩放功能使用

国际化支持

vis-timeline内置了国际化支持，可以通过moment.js的locale设置来显示本地化时间格式。例如对于葡萄牙语(巴西)环境：

import 'moment/dist/locale/pt-br.js';

const options = {
  moment(date) {
    moment.locale('pt-BR');
    return moment(date);
  },
  // 其他配置...
};

通过合理配置堆叠选项，开发者可以灵活控制vis-timeline的布局方式，满足不同场景下的可视化需求。