如何在Vis.js Timeline中按支付代码垂直堆叠非分组项？

要实现同一支付代码的重叠项垂直堆叠、不同支付代码项不混排的需求，核心是正确启用Vis.js的子组（subgroup）堆叠功能，具体操作如下：

• 启用子组堆叠：在配置项中必须同时设置stack: true和subgroupStack: true——你之前设置stack: false会禁用所有堆叠逻辑，且未开启子组堆叠导致subgroupOrder报错
• 绑定项到子组：将每个项的paymentCodeId直接赋值给subgroup属性，让同支付代码的项归为同一个子组
• 可选配置：如果需要在分组内显示子组标题或调整子组顺序，可补充对应的子组配置

修改后的完整代码示例 #

const items = [
  { id: 1, group: "section_1", subgroup: 1, start: "2025-08-26 09:00", end: "2025-08-26 11:00", paymentCodeId: 1, content: "Item A" },
  { id: 2, group: "section_1", subgroup: 1, start: "2025-08-26 10:30", end: "2025-08-26 12:00", paymentCodeId: 1, content: "Item B" },
  { id: 3, group: "section_1", subgroup: 2, start: "2025-08-26 09:00", end: "2025-08-26 10:00", paymentCodeId: 2, content: "Item C" },
  { id: 4, group: "section_1", subgroup: 2, start: "2025-08-26 09:30", end: "2025-08-26 10:30", paymentCodeId: 2, content: "Item D" },
];

const groups = [
  { id: "section_1", content: "Section 1", subgroups: [
    { id: 1, content: "支付代码1" },
    { id: 2, content: "支付代码2" }
  ] },
];

const options = {
  stack: true,
  subgroupStack: true,
  subgroupOrder: function (a, b) {
    // 按支付代码ID升序排列子组
    return a.id - b.id;
  }
};

new vis.Timeline(document.getElementById("timeline"), items, groups, options);

效果说明 #

• 同一subgroup（即同一支付代码）的重叠项会自动垂直堆叠，不会和其他支付代码的项混排到同一行
• 若不需要显示子组标题，可直接删除groups里的subgroups配置，子组的堆叠逻辑依然生效
• subgroupOrder用于控制子组在分组内的垂直顺序，可根据需求自定义排序规则

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