Files
Timeline_Generator/examples/QUICK_START.md
beabigegg 2d37d23bcf v9.5: 實作標籤完全不重疊算法
- 新增 _calculate_lane_conflicts_v2() 分開返回標籤重疊和線穿框分數
- 修改泳道選擇算法,優先選擇無標籤重疊的泳道
- 兩階段搜尋:優先側別無可用泳道則嘗試另一側
- 增強日誌輸出,顯示標籤範圍和詳細衝突分數

🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-06 11:35:29 +08:00

3.7 KiB
Raw Blame History

TimeLine Designer - 快速入門

🚀 5 分鐘快速上手

步驟 1: 啟動系統 (30 秒)

# Windows 雙擊執行
start_dev.bat

等待看到以下訊息:

Backend:  http://localhost:8000  ✅
Frontend: http://localhost:12010 ✅

步驟 2: 開啟瀏覽器 (10 秒)

訪問: http://localhost:12010


步驟 3: 匯入示範檔案 (30 秒)

  1. 拖曳 examples/demo_project_timeline.csv 到上傳區
  2. 看到 " 成功匯入 15 筆事件!"

步驟 4: 生成時間軸 (10 秒)

  1. 點擊 「生成時間軸」 按鈕
  2. 等待 1-2 秒渲染完成

步驟 5: 互動與匯出 (1 分鐘)

  • 🖱️ 滑鼠滾輪:縮放
  • 🖱️ 拖曳:平移
  • 🎯 懸停:查看詳情
  • 💾 匯出:選擇格式 (PDF/PNG/SVG) 和 DPI點擊匯出

📋 三個示範檔案

1 template.csv - 空白模板

用途: 建立您自己的時間軸 內容: 只有欄位標題 + 1 行範例

2 demo_project_timeline.csv - 專案開發

事件: 15 筆(專案管理、需求、開發、測試、部署) 時間: 2024/01-02 (2 個月)

3 demo_life_events.csv - 個人履歷

事件: 11 筆(教育、職涯、生活里程碑) 時間: 2015-2026 (11 年)

4 demo_product_roadmap.csv - 產品路線圖

事件: 14 筆(季度規劃、募資、產品發布) 時間: 2024-2025 (1.5 年)


🎯 核心功能

功能 操作
📁 匯入資料 拖放 CSV/XLSX 到上傳區
🎨 生成圖表 點擊「生成時間軸」
🔍 縮放 滑鼠滾輪
🖱️ 平移 拖曳圖表
💾 匯出 選擇格式 + DPI點擊匯出
🗑️ 清空 點擊「清空事件」

📊 CSV 格式速查

必填欄位

id,title,start
event-001,事件標題,2024-01-01

完整欄位

id,title,start,end,group,description,color
event-001,事件標題,2024-01-01,2024-01-05,分組A,描述文字,#3B82F6

🎨 常用色碼

#3B82F6  藍色   (科技、信任)
#10B981  綠色   (成功、成長)
#F59E0B  黃色   (警示、重要)
#EF4444  紅色   (緊急、里程碑)
#8B5CF6  紫色   (創新、高級)
#EC4899  粉色   (溫馨、生活)

💡 快速技巧

建立單日事件

留空 end 欄位:

id,title,start,end
M001,里程碑,2024-01-15,

使用群組分類

同一群組會自動上下排列:

id,title,start,end,group
E001,事件A,2024-01-01,2024-01-05,開發階段
E002,事件B,2024-01-03,2024-01-07,開發階段
E003,事件C,2024-01-06,2024-01-10,測試階段

Excel 快速填充

  • ID 序列: 使用公式 =TEXT(ROW()-1,"event-000")
  • 日期序列: 選取起始日期,拖曳填充把手

常見問題速解

Q: 中文亂碼?

A: Excel → 另存新檔 → CSV UTF-8 (逗號分隔)

Q: 日期錯誤?

A: 使用格式 2024-01-01 (YYYY-MM-DD)

Q: 圖表沒顯示?

A:

  1. 確認已點擊「生成時間軸」
  2. 檢查瀏覽器 Console (F12) 是否有錯誤

Q: 匯出失敗?

A: 必須先生成時間軸才能匯出


🔧 故障排除

後端無法啟動

# 檢查環境
conda activate timeline_designer
conda list | grep fastapi

# 重新安裝依賴
pip install -r requirements.txt

前端無法啟動

cd frontend-react
npm install
npm run dev

端口被佔用

# Windows
netstat -ano | findstr :8000
netstat -ano | findstr :12010

# 終止進程
taskkill /PID <PID> /F

📞 需要更多幫助?


祝您使用愉快! 🎉