如何在 SVG 中建立多條長條的長條圖

多條長條的長條圖是一張單一圖表，內含兩條以上的長條，每條長條各自由清單中 2 到 30 列中各自的標籤和數值繪製而成。不必安裝軟體，最快的方式就是把你的標籤,數值配對貼到長條圖產生器，檢視即時預覽，然後把結果下載成與預覽像素級一致的獨立 SVG。

當你需要比較的類別超過一個時，多長條排列通常是最一目了然的方式來呈現差異。單一列數值可以用一句話總結，但一旦你跨過三或四個類別——例如最暢銷產品、每月註冊數、跨多題的問卷評分——讀者就會開始掃視視覺模式。最高的長條、最矮的長條、中間的落差：這些模式正是長條圖被設計來揭露的。

大多數繪圖工具的挑戰在於「多條長條」很快變成「多項設定」。在第一條長條出現之前，你得不斷選擇顏色、字型、格線數量、座標軸方向以及其他數十個旋鈕。對於一份快速比較的圖表——投影片、報告或部落格文章所需的那種——這些前置作業通常不值得。一個能接受純文字並回傳乾淨 SVG 的工具，能在不犧牲資料控制權的前提下消除這些摩擦。

how to create a bar chart with multiple bars

多長條圖實際上包含什麼

在你開始輸入列之前，先了解長條圖產生器會繪製什麼內容，有助於你據此調整輸入資料。無論你包含幾條長條，每張圖表都有同樣的六個要素：

標題（可選），置於圖表上方以提供背景脈絡。
類別標籤，每列一個，沿水平軸排列。
垂直軸上五個數值刻度，為長條提供比例尺。
底部的基準線，所有長條皆從其上長出。
零點參考線，讓讀者知道計數從哪裡開始。
長條本身，每條依其數值按比例調整大小。

當你的資料涵蓋範圍很廣時，若有長條太高或太矮而無法在所選刻度中完整呈現，工具還會顯示可見的截斷標記，這在單一離群值主導其餘資料時特別實用。

撰寫你的標籤,數值列

資料格式刻意嚴格，讓解析器不必猜測你的意思。每一列僅包含一個標籤和一個數值，以單一逗號分隔。標籤內不能有逗號、數字內不能有逗號，也不能有多餘的標點符號。空白列可用來表示間隔，但每個非空白列都需要那個單一逗號。

以下是一份乾淨輸入清單的簡短範例：

列	輸入範例	意義
1	Q1 Signups, 412	412 signups in Q1
2	Q2 Signups, 587	587 signups in Q2
3	Q3 Signups, 503	503 signups in Q3
4	Q4 Signups, 691	691 signups in Q4

請讓標籤夠短，以在長條下方完整顯示而不重疊。如果你有較長的類別名稱，例如「Customer satisfaction, post-redesign」，可以考慮縮短成簡短形式如「CSAT post」，並在周圍文字或註腳補上完整詞彙。

在長條圖產生器中建立圖表

當你的列準備好後，實際產製的步驟很短。長條圖產生器的設計讓你看到的預覽就是即將下載的 SVG，因此不會有第二階段再用不同設定重繪檔案。

在瀏覽器中開啟長條圖產生器。
如果想在圖表上方加上標題，請在標題欄位輸入（可省略）。
把你的標籤,數值列貼上或輸入到輸入方塊中，每列一行，標籤與數值之間以單一逗號分隔。
點擊 Generate 按鈕，觀察右側預覽繪製。
閱讀長條下方的類別標籤，以及垂直軸上的五個刻度值，以確認比例尺。
檢查基準線和零點線，確認每條長條的起始位置。
若有長條頂到或觸及可見區域的頂端或底部，留意極端範圍指標，並判斷該列是否要刪除或保留為可見的截斷標記。
點擊下載按鈕將 SVG 檔案儲存到你的電腦。
在本機開啟 SVG，確認儲存後的檔案與預覽完全一致。

下載前先讀懂預覽

預覽是多數人會略過的部分，而那正是小錯誤被鎖進最終檔案之處。請花點時間依序檢查五件事。

首先，類別標籤應位於正確長條的下方且完全顯示。如果某個標籤被裁切，代表該列對圖表寬度而言太長，請縮短該標籤。

其次，五個刻度值應涵蓋你的資料範圍，不留下過大的空白。如果你最高數值是 691，而頂部刻度是 1000，所有長條就會看起來矮小且相似。工具會自動挑選合理的範圍，所以出現巨大空白通常代表有一兩個離群列把比例尺拉高了。

第三，基準線應清晰繪製，並位於繪圖區底部。所有長條都應從該基準線開始，以維持比較上的誠實。

第四，零點線應清楚可見。當你的數值包含正數與負數時，零點線會浮在基準線上方，你會看到長條同時向上與向下指。這對於包含負值的圖表來說是正確行為。

第五，留意任何極端範圍指標。當單一長條相較於其他長條過大或過小而無法按比例繪製時，就會出現這類指標。該指標代表你在預覽中看到的相對高度並非完全等比例——它們被截斷以維持圖表可讀性。

為何下載的 SVG 很有用

長條圖產生器會儲存一份獨立 SVG，那是一個以純 XML 撰寫的單一檔案，將每條線、每個矩形和每個標籤描述為向量圖形。根據 W3C SVG 規範，SVG 檔案是以文字為基礎、可縮放至任何尺寸而不失真，並能在任何現代瀏覽器或向量編輯器（如 Inkscape 或 Illustrator）中開啟。

實際上，這代表你可以把該檔案拖入 PowerPoint 投影片，它會放大填滿整張投影片而不變模糊；用一行 HTML 嵌入網頁；或在設計工具中開啟以重新上色或重新設定長條樣式。沒有專有格式需要轉換，也不必內嵌字型，因為該工具使用的是標準系統圖形。

另一項低調的好處是再現性。下載的檔案與預覽完全一致，所以若有同事問「這張圖表是怎麼做的？」，你可以直接交付輸入列與 SVG，讓他們在自己的機器上使用同一個工具重新產生一張完全相同的圖表。

何時該用長條圖，而非折線圖或圓餅圖

長條圖、折線圖和圓餅圖都能將數值資料視覺化，但它們回答的問題不同。了解哪一種更合適，有助於避免圖表看似漂亮卻溝通不良。

圖表類型	最適合	使用時機
長條圖	比較離散類別	你擁有 2–30 個類別，並希望讀者並排比較精確高度。
折線圖	顯示沿連續軸的變化	水平軸是時間或其他有序序列，趨勢比個別數值更重要。
圓餅圖	顯示整體的組成部分	你擁有少數加總為 100% 的類別，「整體的一部分」是主要訊息。