求支持多子垂直时间线及缩放控制的JavaScript库/项目

我之前也找过类似的垂直多时间线方案，下面几个库和思路应该能完美匹配你的需求：

1. vis.js Timeline #

这是功能最全面的选择之一，原生就支持垂直布局，多轨道（子时间线）、缩放控制这些需求都能轻松满足：

• 自带orientation: 'vertical'配置项，一键切换垂直布局
• 通过**分组（Group）**机制实现多条子时间线，每个分组对应一条独立的时间轨道
• 内置缩放、平移、拖拽等交互，还支持通过API手动控制缩放级别
• 自定义性极强，能修改时间节点、轨道的样式和内容

简单示例代码 #

// 初始化vis.js时间线
import { Timeline } from 'vis-timeline';

// 准备多轨道数据
const timeItems = new vis.DataSet([
  {id: 1, content: '主时间线项目', start: '2024-05-01', end: '2024-05-10', group: 1},
  {id: 2, content: '子线1任务A', start: '2024-05-02', end: '2024-05-08', group: 2},
  {id: 3, content: '子线2任务B', start: '2024-05-05', end: '2024-05-12', group: 3},
]);

// 定义子时间线分组
const timelineGroups = new vis.DataSet([
  {id: 1, content: '主时间线'},
  {id: 2, content: '子时间线-运营'},
  {id: 3, content: '子时间线-技术'},
]);

// 配置选项：垂直布局+缩放
const options = {
  orientation: 'vertical',
  zoomable: true,
  zoomKey: 'ctrlKey', // 按住Ctrl+滚轮缩放
  moveable: true,
  groupHeightMode: 'fixed',
};

// 渲染时间线
const container = document.getElementById('timeline-wrap');
const timeline = new Timeline(container, timeItems, timelineGroups, options);

2. TimelineJS #

虽然它常被用于水平时间线，但通过自定义CSS可以轻松改成垂直布局，支持多轨道配置：

• 官方提供了轨道（track）配置，可直接添加多条子时间线
• 自带时间范围缩放功能，支持点击节点查看详情
• 适合需要快速搭建、对样式自定义要求不极致的场景

3. 轻量方案：Chart.js + 自定义逻辑 #

如果需要更轻量化的实现，可以用Chart.js结合自定义插件：

• 利用垂直柱状图的变种来模拟时间线轨道
• 自己编写缩放逻辑（通过修改X轴的时间范围实现）
• 完全可控，但需要额外处理多轨道的层级和交互

核心需求实现要点 #

• 缩放控制：成熟库都自带缩放API（比如vis.js的timeline.zoomIn()/zoomOut()），也可通过监听鼠标滚轮事件自定义缩放逻辑
• 子时间线：通过分组/轨道机制区分不同时间线，数据中绑定对应分组ID即可实现独立展示
• 样式定制：通过CSS修改轨道间距、节点颜色、线条样式等，适配项目UI风格

内容的提问来源于stack exchange，提问作者Sahan Serasinghe