長條圖是一種圖表,每個類別會以一個矩形長條表示,長條長度與其所代表的數值成正比;而從純文字清單製作長條圖最簡單的方式,就是把 2 到 30 行的「標籤,數值」資料列貼到 長條圖製作工具 中,檢查預覽結果,再把渲染後的圖表下載成獨立的 SVG 檔案。長條圖製作工具會讀取以「標籤,數值」格式撰寫的資料列(每個非空白列只用一個逗號分隔),以零為基準線繪製長條,並使用五個等距刻度值,所產生的 SVG 是直接從預覽中顯示的精確字串生成,因此你下載到的檔案會與你確認過的內容完全一致。
試算表程式雖然能製作長條圖,但通常需要填入資料範圍、進行格式設定,還要另外執行匯出動作。專門設計的工具則跳過了這些步驟:你只需要專注在類別標籤和對應的數字,圖表幾何、刻度間距和檔案輸出都會自動處理。本文將逐步說明長條圖製作工具所要求的精確輸入格式、產生圖表的點擊順序、如何解讀預覽畫面所顯示的內容,以及當你的資料形狀略有不同時,該如何在此工具與其他相關產生器之間做出選擇。
長條圖製作工具所要求的輸入格式
每個非空白列都必須只包含一個逗號。逗號前的文字會成為顯示在座標軸下方的類別標籤;逗號後的文字會被解析為決定長條長度的數值。標籤中可以包含空格與大部分標點符號;數值則應為純數字(支援小數、支援負數,且工具會忽略貨幣符號以及數字周圍多餘的空白)。
含有零個、兩個或更多逗號的資料列會被忽略,這代表圖表只會根據解析器完全理解的資料列來繪製。標題為選填項目,只需在貼上區域上方的單一欄位中輸入;如果圖表的脈絡從標籤就已明顯,你可以留白。工具強制規定資料列範圍為 2 到 30 列,以確保無論你帶入多少類別,座標軸都能保持清晰可讀。
| 元件 | 顯示位置 | 控制項目 |
|---|---|---|
| 標題 | 圖表頂部 | 單一選填文字欄位 |
| 類別標籤 | X 軸下方,為符合空間而旋轉 | 每列逗號前的文字 |
| 長條數值 | Y 軸方向的長條長度 | 每列逗號後的數字 |
| 刻度值 | 左側座標軸,等距排列 | 依數值範圍自動產生的五個刻度 |
| 基準線 | Y 為零的位置 | 明確繪製,使長度為零的長條仍可顯示 |
如何使用長條圖製作工具製作長條圖
整個流程就是「貼上、預覽、下載」,請依序執行以下步驟。
- 開啟 長條圖製作工具,如果需要,在標題欄位中輸入簡短的標題。
- 將資料以「每個類別一列」的格式貼到文字區,精確格式為「標籤,數值」,例如「Apples,42」,該行只有一個逗號,且不包含其他多餘的逗號。
- 確認你的資料列數介於 2 到 30 列(含)之間,並且每個非空白列都只有一個逗號;請刪除多餘的逗號,或將含多個逗號的列拆成多行。
- 輸入的同時觀察預覽更新的情形。閱讀底部的標籤、左側座標軸上的五個刻度值,以及零基準線的位置。
- 檢查是否有長條緊貼頂部邊緣,或過於接近零而看起來幾乎看不見;如果有長條被裁切,請考慮將數值等比縮小,或拆分資料集,以維持圖表的清晰度。
- 點擊 SVG 下載按鈕。你取得的檔案是根據預覽中顯示的精確字串所產生,因此儲存的檔案會與你剛剛確認過的內容完全一致。
下載前先讀懂預覽畫面
預覽是你唯一能確認圖表是否反映你預期資料的機會。先從標籤開始:類別名稱被旋轉或截斷,代表標籤過長,你可能需要加以縮寫。接著查看左側座標軸上的五個刻度值,它們應該涵蓋你的資料範圍——最小的刻度為零,最大的刻度則應舒適地高於你的最大值,在最高的長條上方留有可見的空間。
極端值的處理相當重要,因為單一極大的數值可能會把其他所有長條壓扁。如果有某個類別特別突出,圖表可能會套用顯示上限,以維持較小的長條依然可見;在此情況下,預覽中最高的刻度會低於最大值,而受影響的長條會在圖表邊緣處被截斷。把這視為「該資料集需要被拆分」的提示,而非工具的 bug。你也可以確認零基準線已被明確繪製,這正是讓任何零值長條以扁平條狀顯示、不會完全消失的原因。
使用範例資料的具體操作示範
假設你經營一家小型書店,想比較五個類別的每週銷售情形。請將以下內容貼到長條圖製作工具中:
Fiction,182
Nonfiction,94
Children,67
Cookbooks,41
Comics,28
五列資料,每列只有一個逗號,所有數值均為正數。預覽會繪製五個垂直長條,其長度與上述數量成正比。最小刻度位於 0,最大刻度攀升到 182 以上,Fiction 長條上方有明顯的餘裕,因此不會觸碰到圖表框線的頂部。由於沒有任何一列的標籤或數值中含有逗號,解析器會接受每一行,圖表也能完整反映你的資料集。
現在假設資料集改變,出現了一個離本值:Fiction,182 被一週爆款小說的銷售數字 Fiction,1820 所取代。預覽會偵測到這個極端範圍,讓較小的長條保持可見,並把 Fiction 長條在圖表邊緣處截斷,刻度上限低於 1820。這個視覺提示就是「將 Fiction 數值除以 10(改回 Fiction,182)以恢復平衡比例」,或「將離本值那一週獨立繪製圖表」,以便其他類別仍清晰可讀。
何時該改用其他類型的圖表
長條圖擅長強調離散資料的比較,但並非所有數字清單都適合使用長條圖。如果你的數值代表整體中的部分,以圓形搭配比例扇區來表達占比,會比一排長條更為直覺。圓餅圖製作工具採用相同的「標籤,數值」輸入格式,但匯出的是 PNG,更適合用於簡報與社群媒體圖片。
如果你的資料屬於時間序列而非分類資料——例如一年中每個月的數量——使用連續的折線會比分離的長條更能呈現趨勢。折線圖製作工具接受相同的資料列格式,並產生 SVG 檔案;若為兩個數值欄、每列代表一組 (x, y) 配對的資料,散佈圖製作工具會繪製線性散佈圖,可能更為契合。至於在單一 SVG 中繪製分組長條,請參考如何在 SVG 中建立含多個長條的長條圖;若為圓餅形狀的比較,可閱讀對應的逐步說明從任何數字清單製作圓餅圖。
| 資料形狀 | 最佳選擇 | 工具 | 輸出格式 |
|---|---|---|---|
| 每個類別一個數值 | 長條圖 | 長條圖製作工具 | SVG |
| 整體中的部分 | 圓餅圖 | 圓餅圖製作工具 | PNG |
| 隨時間變化的序列值 | 折線圖 | 折線圖製作工具 | SVG |
| 配對的 (x, y) 座標 | 散佈圖 | XY 散佈圖製作工具 | SVG |
| 每個類別多個數列 | 分組長條圖 | 分組長條圖教學 | SVG |
常見輸入問題的排解
大多數預覽異常,都可追溯到某一列資料未被成功解析。如果工具回報某列被略過,該列很可能含有零個或多個逗號,這常發生於標籤本身包含逗號的情況(例如「城市,州」)。建議的修正方式是將該內部逗號替換為破折號或直槓,讓解析器只看到單一作為分隔的逗號。
如果長條長度顯示不正確,但資料列看似沒問題,則可能是逗號右側的數值含有不應出現的字元。貨幣符號、百分號以及千分位分隔符(數字內部的逗號)都會導致基本解析失敗——請寫成 1500 而非 1,500。負數可以使用,但負號必須緊鄰第一個數字的左側,且中間沒有空格。科學記號可在尾數與指數皆為整數時被解析(例如 3e5),但對工具處理的 2 到 30 列範圍而言,這種寫法很少需要。
另一個常見的問題是看似相同的資料列,卻產生不同長度的長條,這通常代表其中一個數值的前後含有空格。請整理你貼上的內容,確保每個數值的開頭與結尾都是數字,然後重新產生圖表。就 SVG 檔案本身而言,由於它是基於文字的 XML,可以在任何向量編輯器中開啟,並透過編輯 stroke 或 fill 屬性來重新上色,讓你不必重新執行工具就能快速產生視覺變體。如果你想手動進行這些編輯,W3C SVG 規範中關於 SVG 圖形格式的章節涵蓋了基本的屬性模型。
隱私與資料所在位置
由於長條圖製作工具的解析與渲染都在瀏覽器中完成,你所貼上的資料列從不離開你的裝置。不會上傳到任何伺服器進行處理、儲存或分析;在你端所產生的唯一檔案,就是你所選擇下載的 SVG。如果你關閉瀏覽器分頁或視窗,記憶體中的資料也會一併被捨棄。這使得此工具可用於內部數字、草稿問卷結果,或任何你通常不會張貼到網頁表單中的數字。
如果你正在權衡各種選項,在 Canva 中無需設計技巧製作心智圖對此有詳細說明。
如果你正在權衡各種選項,用一個簡單工具調整任何長條圖的長條寬度對此有詳細說明。