在 Google Sheets 中建立長條圖的做法，是選取兩欄資料 — 一欄是標籤、一欄是數值 — 然後選擇 Insert（插入）→ Chart（圖表），這樣就會把選取範圍轉換成一個可編輯的 Column chart（直條圖），在試算表旁邊畫出垂直長條。Chart editor（圖表編輯器）會開啟一個側邊面板，讓你不需要寫任何公式，就能更改圖表類型、圖表標題、座標軸標題、刻度、格線與資料數列顏色。圖表本身是一個可以拖曳、調整大小、複製，或另存為圖片的浮動物件，而且只要底層儲存格的資料變動，它就會自動更新。如果你根本不需要試算表，長條圖產生器會拿同樣的雙欄資料，在目前的瀏覽器分頁中建立一張結果確定的垂直長條圖，並匯出一個與畫面預覽完全一致的獨立 SVG 檔案。兩種做法最後都會得到一張垂直長條圖；差別在於你是待在一個具備各種周邊功能的試算表格線裡，還是使用一個單一用途、輸出結果是可攜式 SVG 檔案的瀏覽器工具。
直接在 Google Sheets 中建立長條圖
當資料原本就自然放在 Google Sheets 裡時，這個試算表不需要任何附加元件，只要點幾下就能產生圖表。標籤欄存放類別名稱，數值欄存放對應的數字量測值；只要這兩欄存在，圖表就有了意義。
- 在 A 欄輸入類別標籤，在 B 欄輸入數值，最上方加一列標題列。
- 選取整個範圍，包含兩個標題儲存格，然後從選單中選擇Insert（插入）→ Chart（圖表）。
- 在 Chart editor（圖表編輯器）的Setup（設定）分頁中，打開Chart type（圖表類型）下拉選單，選擇Column chart（直條圖）。Google Sheets 把垂直長條圖稱為「Column chart」；同一個選單裡的「Bar chart」項目，畫出來的則是水平長條。
- 切換到Customize（自訂）分頁，設定圖表標題、座標軸標題、刻度頻率、格線顏色，以及資料數列的填色。
- 點擊圖表以外的地方，取消選取。這時圖表已經是工作表上一個自由浮動的物件，只要底層儲存格變動，就會自動更新。
對圖表按右鍵，可以看到移動圖表、另存為圖片，或發布到網路上的選項。因為圖表是連結到儲存格範圍、而不是嵌入固定數值，所以排序或編輯資料時，長條會自動更新，不需要重新建立圖表。
用長條圖產生器跳過 Google Sheets
在試算表裡工作，會附帶許多大多數長條圖根本用不到的功能：儲存格格式、具名範圍、公式、共用權限控制。如果目標只是把一份簡短的類別與數值清單，變成一張易讀、可下載的圖表，這些功能就只是額外的負擔。
長條圖產生器是一個單一用途的瀏覽器工具，能從一組小型的類別資料集，畫出一張垂直長條圖，並把結果匯出成獨立的 SVG 檔案。解析、版面配置、預覽渲染，以及 Blob 下載，全部都在目前的分頁中完成，因此標籤、數值與標題永遠不會離開瀏覽器。這個 SVG 高度為 520 像素，隨著列數增加會往水平方向擴展，讓每個類別的空間保持分開，而不是把 30 個標籤硬塞進一個手機寬度的窄欄裡。匯出的檔案是一般的錨點下載，使用的是與預覽畫面相同的 SVG 字串，所以你看到的畫面，就是你儲存下來的內容。
當資料集小到可以直接輸入或貼上、沒有試算表可以依附，或是最終交付物應該是一個可攜式的 SVG、而不是嵌入試算表中的物件時，這個工具最實用。如果讀者的資料放在試算表裡，也可以套用同樣的概念，去在沒有 Excel 的情況下，用 Excel 資料製作長條圖，因為輸入格式是一樣的。
| 特性 | Google Sheets 的 Column chart | 長條圖產生器 |
|---|---|---|
| 資料位置 | 試算表中的兩欄儲存格 | 一個文字欄位，內含 label,value（標籤,數值）列 |
| 圖表樣式 | 工作表上的浮動物件 | 會往水平方向擴展的 520 px SVG |
| 座標軸控制 | 含滑桿與輸入欄位的 Customize（自訂）面板 | 結果確定的整齊上限值，固定五個刻度 |
| 輸出格式 | 嵌入工作表的圖表，可選擇匯出 PNG | 與預覽畫面一致的獨立 SVG |
| 資料處理方式 | 與試算表一起儲存在 Google 的伺服器上 | 只留在目前的瀏覽器分頁中 |
| 更新方式 | 來源儲存格變動時重新渲染 | 只有再次點擊 Generate 時才會重新渲染 |
長條圖產生器接受什麼格式
輸入格式刻意設計成簡化版的 CSV，這樣解析器就能保持嚴格，不需要用猜的。每一列被接受的資料，都會被解讀成恰好一個標籤、一個逗號，加一個數字。
每一列非空白的資料，都必須恰好包含一個逗號。逗號前面的文字是類別標籤，逗號後面的文字是數值。標籤最多可以有 24 個 UTF-16 編碼單位，數值字串最多 40 個，前後的空白都會被去除。數字必須是非負、有限的十進位小數，或科學記號表示法；e與E都能接受，負零會被正規化成零，而寫法上看起來不是零、但實際運算會下溢成零的輸入，則會被拒絕。這個圖表總共接受 2 到 30 列非空白資料。空白列或只有空格的列會被忽略。
| 輸入列 | 是否被接受？ |
|---|---|
| Apples,12 | 是 |
| Pears, 3.5 | 是（空白會被去除） |
| Sales 2024,1.2e3 | 是（接受科學記號表示法） |
| "Bananas",15 | 否（不支援加引號的欄位） |
| Mangoes, | 否（數值為空） |
| ,42 | 否（標籤為空） |
| Grapes,-2 | 否（不支援負數） |
| Oranges,73,extra | 否（每列超過一個逗號） |
不支援加引號的欄位、加引號的逗號、額外的欄位、附帶單位的數字、運算式、十六進位、Infinity 與 NaN。重複的標籤是允許的，會依照輸入順序，各自變成獨立的長條；這個工具不會做彙總、排序，也不會推測單位。
產生、預覽並下載 SVG 的步驟
整個流程只有三個動作：輸入、產生、下載。
- 如果想要顯示可見的圖表標題，就在標題欄位貼上文字；留空的話，SVG 仍然會有無障礙標籤Bar chart（長條圖）。
- 把 label,value（標籤,數值）的資料列貼進資料欄位，每行一列，每個非空白列恰好一個逗號。
- 點擊Generate（產生）。如果每一列都通過解析，圖表預覽會立刻出現；只要有任何一列格式不對，整個請求就會被拒絕，先前的預覽、狀態與下載也都會被清除。
- 查看產生的圖表：底部是類別標籤，基準線在零的位置，左側有五個間距平均的數字刻度。把滑鼠移到任何一根長條上，就能看到它的提示文字。
- 點擊Download SVG（下載 SVG）。下載的檔案，就是預覽畫面所渲染出來的那個字串本身，被包裝成一個 Blob，並透過一般的錨點下載提供給你。
在任何步驟修改標題或資料，都會立刻清除先前的預覽、狀態與下載，這樣一個做到一半的圖表就不會意外流入儲存的檔案裡。驅動預覽畫面與 Blob 下載的是同一個 SVG 字串，所以你儲存的檔案，會和你檢視過的內容完全一致。
座標軸、刻度與零值長條的行為方式
這個圖表使用非負的線性比例尺。零永遠對應到基準線，顯示出來的座標軸最大值則對應到繪圖區的頂端。上限值會被無條件進位到某個十的次方乘以 1、2、5 或 10 的有限倍數，並用五個間距平均的參考刻度，呈現出這個範圍。
舉例來說：如果各列資料中的最大值是 73，解析器會把座標軸上限，無條件進位到下一個十的次方乘以 1、2、5 或 10 的倍數，也就是 100。因此五個參考刻度會落在 0、25、50、75、100，其他每根長條的高度，都是它的數值除以 100，再依照繪圖區高度縮放。數值為 73 的長條，會到達繪圖區高度的 73 / 100 = 0.73 處，數值為 0 的長條則會平貼在基準線上。D3 linear scale 參考文件說明了這個由產品自行定義的「整齊範圍」做法所依據的底層連續對應方式，但需要說明的是，這個工具的刻度選擇雖然是結果確定的，並不代表保證會重現 D3 每一個刻度的決定方式。
長條的高度，永遠與提供的數值成正比。系統不會為了讓長條看得見，額外加上最小高度，因為這麼做會破壞前面說明的線性比例尺。每一根非零的長條，都會附帶顯示精確數值的提示文字，標記中也包含無障礙標籤與描述，因此除了視覺上清楚之外，這張圖表對輔助技術來說也依然可讀。
發布前值得檢查的限制與邊界情況
在圖表被公開發布之前，有幾個邊界情況值得先檢查一下。
全部為零的資料。如果每一列的數值都是零，圖表會切換到一個明確的「0 到 1」參考範圍。每根長條的高度都會停在基準線上的零，圖表也會顯示一則明確的「全部為零」提示。不會出現除以零的錯誤，也不會更動任何提供的數值。
極端的數值範圍。一個很小的正數，如果和一個非常大的數值放在一起，因為線性比例會小於 SVG 座標的精確度，可能會被畫成不到一個像素的高度。提示文字仍然會顯示正確的數值，但這根長條在視覺上可能會和零難以區分。如果這一點很重要，可以改用對數圖表，或把資料拆成不同的圖表。
列數限制。最少 2 列，最多 30 列。超過 30 列會直接失敗，並顯示確切的非空白列數，不會悄悄截斷資料。只要有一列格式不對，就會拒絕整個請求 — 解析器不會跳過有問題的列、不會只保留前 30 列，也不會用零去取代無法解讀的數值。
輸出安全性。每一個標籤與標題，在進入 SVG 標記之前，都會先依照W3C SVG 2 規範的規則進行 XML 逸出處理。and 符號、角括號、引號與撇號會變成實體字元；XML 禁止的控制字元與未成對的代理字元，則會變成替代字元 U+FFFD。看起來像指令碼的標籤，仍然只會是可見的文字，不會變成一個 SVG 元素。數字座標，只會來自經過驗證的有限數值，並四捨五入到小數點後三位。
本機處理。解析、版面配置、預覽渲染、Blob 建立與下載，全部都在目前的瀏覽器分頁中完成。不會有任何標籤、數值、標題、SVG，或互動內容被上傳到伺服器。
如果你還在權衡不同做法，如何在不寫程式碼的情況下用 matplotlib 製作長條圖這篇文章有詳細說明。