TimeLane — 使用说明

操作方式

• 拖拽 — 鼠标在图表区按下拖拽平移时间轴
• Ctrl + 滚轮 — 以光标位置为中心缩放
• 点击分组标题 — 折叠 / 展开该分组
• 悬停色块 — 查看色块属性详情
• 普通滚轮 — 垂直滚动通道列表

图表元素组成

• 色块长度(X轴) = 事项的持续时间
• 色块高度(Y轴) = 事项的某项属性(百分比)
• 色块颜色 = 由数据直接指定色值
• 事件标注(▲) = 时间点上的文字标注
• 通道底部文字 = 可选说明

数据格式

使用 JSON 格式。顶层 groups 数组包含多个分组，每个分组下有 channels 数组。

每个通道包含 blocks(色块列表) 和可选的 events(事件标注列表)。

完整 JSON 结构示例：

{
  "groups": [{
    "title": "大厅",
    "channels": [{
      "title": "桌子 1",
      "description": "靠窗四人桌",
      "footer": "全天营业",
      "blocks": [{
        "start": "2024-05-01T09:30:00",
        "end": "2024-05-01T10:45:00",
        "heightPercent": 24,
        "color": "#FF6B6B",
        "text": "4人 午餐",
        "textConfig": { "show": true, "color": "#fff", "size": 11 },
        "properties": { "收入": "¥480", "人数": "4人", "满意度": "满意" }
      }],
      "events": [{
        "time": "2024-05-01T11:10:00",
        "text": "上菜",
        "color": "#FF6B6B"
      }]
    }]
  }],
  "config": {
    "chartTitle": "饭店餐桌收入可视化",
    "channelHeight": 60,
    "timeFormat": "HH:mm",
    "timeFontSize": 11,
    "blockFontSize": 10,
    "eventFontSize": 10,
    "showEvents": true,
    "showGridLines": true
  }
}

导出

• 导出 SVG — 矢量格式，可无损放大
• 导出 PNG — 位图格式，2x 分辨率