甘特圖將每個任務映射到一個共享的行事曆時間軸上,每條長條的左邊緣對齊其開始日期,右邊緣對齊其包含結束日期。甘特圖製作工具會在您的瀏覽器中,以嚴格的 YYYY-MM-DD UTC 日期格式,從 2 到 30 行的 task,start,end 資料建立出完全相同的時間軸,然後將可見的預覽匯出為獨立 SVG 檔案,做到與螢幕上的圖表位元完全一致。Canva 屬於設計畫布而非專案排程工具,因此沒有原生的甘特圖類型或內建的日期軸;設計師搜尋後通常會手動在空白投影片上繪製長條,既繁瑣又脆弱,只要任何一個日期變動就無法保持同步。專為此目的打造的瀏覽器工具會為您處理日期運算、安全地將每個標籤跳脫 SVG 特殊字元,並產生可放入任何文件或附加到任何專案備註的可攜檔案,從而消除這種摩擦。
為何 Canva 不適合製作甘特圖
Canva 擅長海報版面、社群圖片和品牌投影片,但 Canva 設計中的圖表類型目錄僅止於長條圖、折線圖、圓餅圖及少數儀表板小工具。沒有任何一個能產生從特定行事曆日期開始、到特定行事曆日期結束,且下方帶有連續日期軸的水平長條。大多數團隊找到的變通方法是將矩形拖到空白頁上,手動在每欄上方輸入「Day 1」、「Day 2」、「Day 3」,再將矩形拉伸到對應寬度。這在為期一週、只有四個任務的衝刺中還行得通;一旦截止日期變更、專案跨越月份界線,或兩個任務需要明顯重疊時,就會立刻崩潰。
更根本的問題在於 Canva 檔案根本不包含日期概念。每個長條只是一個帶有 x、y、寬度和高度的形狀。當利害關係人要求更新時間軸時,您必須從頭重畫每個形狀。無法貼上新日期然後讓長條自動重新計算,因為 Canva 從未被要求理解日期。甘特圖本質上是日期到長度的對應關係,而無法儲存日期的工具無法計算這種對應。
Canva 的手動變通做法
如果您必須留在 Canva 內,最乾淨的手動方式是表格加上矩形列。工作流程包含六個具體步驟。
- 以簡報的長寬比(例如 1920 乘 1080)建立自訂 Canva 設計。
- 新增 Canva 表格元素,第一欄填入任務標籤,第二欄填入開始日期,第三欄填入結束日期。
- 在表格下方放置一條細的水平導引線,作為日期軸的基準。
- 針對每個任務列,將矩形元素拖到畫布上,將其左邊緣對齊導引線上對應開始日期的欄位,並將其右邊緣拉伸至對應結束日期的欄位。讓日期欄保持等距,並使用 Canva 的位置面板鎖定像素偏移。
- 鎖定矩形和表格,以免意外編輯移動它們,然後在分享前將所有項目群組為一個元素。
- 匯出為 PNG 進行分享,之後每次日期變動時重新開啟檔案並重複整個流程。
這套方法只能用一次。它不是圖表,而是設計師必須在現實改變時重新擺放的手工拼貼圖案,這與專案時間軸應有的功能完全相反。
甘特圖製作工具的不同做法
甘特圖製作工具是一個單頁瀏覽器工具,可將精簡的排程轉換為獨立的 SVG 時間軸。您貼上最多 30 行的 task,start,end,選擇性新增標題,按下 Generate,每個通過驗證的任務就會在共享的 UTC 行事曆軸上以一條帶有標籤的水平長條呈現。輸出 SVG 由驅動預覽的完全相同字串建立,因此您所見即所下載。座標計算具確定性,只有在序列化時才會四捨五入,這代表相同的輸入無論在何種瀏覽器分頁、裝置或作業系統上,都會產生完全相同的輸出。
由於該工具以日期為核心,它能處理手動繪製時容易出錯的棘手情況:在同一天開始與結束的任務仍會佔據一個可見的儲存格;January 1 開始、January 3 結束的日期,由於日期為包含性質,會產生三個行事曆日儲存格;排程長度為 62 天或以下時,使用每日刻度標籤,更長的排程則改用月份刻度,以便在不失任何通過驗證任務的情況下保持軸的可讀性。當輸出寬度大於預覽時,介面會水平捲動,因此標籤在手機螢幕上絕不會被擠壓到無法閱讀的寬度。
在瀏覽器中建立甘特時間軸
- 開啟甘特圖製作工具,在標題欄位中輸入選擇性的標題,最多 100 個 UTF-16 程式碼單位。
- 將排程貼到輸入區,每行一個任務,使用完全 task,start,end 格式。讓每列保持獨立一行,保留開頭與尾端的空白字元(系統會自動去除),並確認每個非空白列恰好包含兩個逗號,以產生三個欄位。
- 確認每個日期都是 YYYY-MM-DD 格式的真實先驗格里高利曆 UTC 日期,且每個包含性結束日期都在其開始日期當天或之後。支援的詞法年份範圍為 0000 到 9999,January 1, 2026 可以,March 14, 0084 也可以。
- 按下 Generate。解析器會檢查 20,000 程式碼單位的原始預算、驗證每列,然後渲染帶有每日或每月刻度的標籤化時間軸,或回報第一個格式錯誤的列並拒絕整個請求。
- 檢查預覽:每條長條應位於正確的刻度之間,每個標籤都應清晰可讀,包含性區間應與您輸入的內容一致。將下載的內容正是這份精確的預覽字串。
- 點擊 Download 將獨立 SVG 存檔。該檔案使用 W3C SVG 命名空間,內含 viewBox 以及可存取的角色和標籤,可在任何瀏覽器、設計應用程式或文件流程中開啟。
排程列格式與硬性限制
精簡版 CSV 是讓輸入可預期的刻意權衡。該工具拒絕引號欄位、引號逗號、額外欄位、跳脫分隔符號及多行欄位。需要逗號的標籤必須在使用前改寫為不含逗號的版本。一個格式錯誤的列就會拒絕整個請求;解析器絕不會略過它或傳回部分圖表,因此第 17 列的打字錯誤就是能否產生有效時間軸或錯誤訊息的差別。空白行可接受,但僅在檢查原始預算之後,因此無法用於在 20,000 程式碼單位限制周圍填充內容。
| 欄位 | 限制 |
|---|---|
| 非空白任務列數 | 2 到 30 |
| 任務標籤長度 | 恰好 80 個 UTF-16 程式碼單位 |
| 選擇性標題長度 | 恰好 100 個 UTF-16 程式碼單位 |
| 原始排程輸入 | 恰好 20,000 個 UTF-16 程式碼單位 |
| 日期格式 | YYYY-MM-DD,恰好 10 個字元 |
| 詞法年份範圍 | 0000 到 9999 |
| 結束日期規則 | 包含性,在開始日期當天或之後 |
| SVG 輸出預算 | 恰好 100,000 個 UTF-16 程式碼單位 |
接受剛好等於上限的值,超過一個單位就會失敗且不進行截斷。如果您需要超過 30 列,請將專案拆分為多個階段,並將每個階段繪製為各自的 SVG,然後在文件中並排排列。
刻度標籤與包含性日期運算
刻度標籤遵循確定性規則,而不是動態的「能塞多少就放多少」啟發式。62 天或以下的區間使用 UTC YYYY-MM-DD 格式的每日刻度,間隔會擴展以維持大約九個標籤,同時必定包含第一個與最後一個日期。例如,九天的衝刺可能每天都有刻度,而 60 天的建置階段可能每七天才有刻度。一旦排程跨越 62 天的界線,刻度會切換為 YYYY-MM 格式的月份,並依據總月數計算固定的月份步長。這是刻意的軸取樣,而非任務截斷:每個通過驗證的任務及其完整日期寬度都保留在圖表中,不論軸上顯示哪些標籤,長條幾何皆不受影響。
包含性計數的計算範例很直接:January 1 到 January 3 的任務佔據三個行事曆日儲存格,因為這些儲存格是 January 1、January 2 與 January 3。開始與結束日期相同的任務佔據一個可見的日儲存格,因此標記為 2026-05-12,2026-05-12 的里程碑仍會呈現為一天的長條。如果每個任務都發生在同一天,共享域為一天,且每條長條仍保持可見,因為計算永遠不會除以零的經過區間。
為何輸出與預覽一致
預覽字串與下載的 SVG 是同一個產物。成功產生後會從完整 SVG 建立一個 Blob URL,並維持足夠長的時間以供同源的普通 anchor 下載使用。Blob URL 會在標題或資料變更、結果被取代、產生失敗,或元件卸載時撤銷,這避免了某些瀏覽器中破壞下載的立即撤銷競爭,並防止累積的 ObjectURL 洩漏。若 Blob 或 URL 建立失敗,不會留下任何陳舊的預覽或下載。較寬的輸出會在預覽中捲動,而不是將標籤壓縮成無法閱讀的手機寬度。
每個使用者字串都是安全的 SVG 文字而非標記。&、角引號、引號和撇號會轉換為 XML 實體;XML 禁止的控制字元與孤立代理項會變為 U+FFFD。標籤僅在完成此轉換後才會出現在 text 與 title 工具提示節點中,選擇性標題以及可存取的 aria-label 也使用相同的跳脫處理,因此看似指令碼的文字仍會以可見字元呈現,而不是 SVG 元素。數值屬性僅來自經過驗證的有限版面配置計算。
何時仍需要真正的專案軟體
甘特圖製作工具僅描述行事曆佔用情況,除此之外別無其他。它不會解析 Microsoft Project 檔案、相依性、里程碑、要徑、假日、工作行事曆、完成百分比、負責人、成本、基準或時區時間戳記,也不會推斷重疊的工作是否可行。如果您的團隊需要相依性規劃、協作、權限、稽核記錄或營運承諾,請將他們指向專用的專案管理軟體,並使用此工具為簡報、狀態郵件或設計文件起草高階時間軸。
日期驗證在嚴格的詞法檢查後遵循 ECMAScript 的日期時間字串格式,輸出詞彙則遵循 W3C SVG 2 規範,這就是該檔案能在瀏覽器、Figma、Illustrator 和大多數文件流程中順利開啟的原因。若想以略為不同的角度深入了解同一工具,請參閱免註冊時間軸指南。
如需更深入的瞭解,請參閱在 Excel 中製作甘特圖:更快速的瀏覽器做法。