為什麼要尋找不同的長條圖製作工具？
一款完全在瀏覽器中運作的長條圖製作替代工具，接收 2 到 30 列嚴格的 label,value 資料，並匯出與預覽中完全相同的 SVG，讓你取得一個無需將任何數值上傳到伺服器即可發佈的圖表檔案。大多數主流圖表工具的權衡取捨都很熟悉：免費方案強制註冊、付費方案鎖住 SVG 匯出，或是需要設計師等級的帳號才能將長條圖放進部落格文章中。Bar Chart Maker 透過在同一個分頁中完成解析、排版、預覽與下載來避開這三種情況，因此標題、標籤、數值與產生的圖表都不會離開你的瀏覽器。由於一切都在本地端，這個工具對於輸入也能更為嚴格：它會拒絕含有內嵌逗號的列、僅接受非負有限數字，並在某一列格式錯誤時拒絕整個請求，而不是悄悄產生部分圖表。
人們尋找替代方案的原因其實出奇地一致。某個熱門編輯器的免費方案將 SVG 匯出藏在付費牆後。拖放式畫布看起來很友善，直到你發現它在你開啟檔案的瞬間就已經上傳了你的 CSV。試算表外掛繪圖效果很美，但產生的圖片其預覽必須透過同一套工具才能檢查、複製或重新設定樣式。Bar Chart Maker 是為相反的情境而設計的：一個小型、定義明確的資料集，需要一張可閱讀的長條圖，檔案格式是網頁設計師實際在使用的，而工作流程簡單到第一次嘗試就能記住。
Bar Chart Maker 有何不同
這個工具的行為繫結在一小組可驗證的保證上，而不是行銷功能清單。最重要的一點是，你在預覽中看到的圖表，與下載檔案中的內容是同一段字串。沒有獨立的匯出管線會以不同的排版、顏色或字型重新渲染資料，因為預覽與檔案本來就是同一份 SVG 標記，檔案是直接從該字串建立的 Blob 所遞送。
其他刻意的選擇也讓它與一般通用圖表編輯器有所區隔：
- 輸入格式是 CSV-lite，而非完整的 CSV。每一非空白列恰好只有一個逗號，前面是標籤，後面是數值 token。引號欄位、額外欄位與內嵌單位預設就會被拒絕，這也是為什麼你可以先不必準備 CSV 檔案，直接貼上一小段列表。
- 座標軸是確定性的線性刻度，上界採用產品定義的「整齊」數值。圖表會在你的最大值之上，取下一個 1、2、5 或 10 乘以十的冪次的倍數作為上界，並繪製五個等距的參考刻度。沒有對數選項，也不會隱含地將數值正規化為百分比。
- 所有使用者字串在進入任何 SVG 屬性、文位元組點、工具提示或無障礙標籤之前，都會先進行 XML 跳脫。&、角括號、引號與撇號會轉為實體，而 XML 不允許的控制字元會替換為 U+FFFD。看起來像 script 標籤的標籤只會是可見文字，而不會成為 SVG 元素。
- 每次成功產生會建立一個 Blob URL 供下載使用，並在編輯、替換、失敗或卸載時將其釋放。下載不會搶先於一個已經過時的 ObjectURL，頁面也絕不會在背景留下這類資源。
以 CSV-Lite 格式準備你的資料
CSV-lite 意味著你將每個類別寫在獨立的一行，格式為 label,value，不包含標頭、引號或額外欄位。空白行與僅含空白字元的行會被略過，因此你可以在列與列之間保留呼吸空間。每個標籤與數值的前後空白會自動去除。同時接受一般小數（例如 12 或 3.5）與科學記號（例如 1.2e3），負零會被正規化為零。
決定工具是否接受或拒絕你資料的明確限制如下所列。
| 欄位 | 限制 |
|---|---|
| 非空白列數 | 2 至 30，含頭尾 |
| 每非空白列的逗號數 | 恰好一個 |
| 標籤長度 | 最多 24 個 UTF-16 程式碼單位；超過一個即失敗 |
| 數值 token 長度 | 最多 40 個字元 |
| 允許的數字 | 非負有限十進位或 e/E 記號 |
| 拒絕的輸入 | 引號欄位、額外欄位、空標籤、單位、公式、十六進位、Infinity、NaN |
| 數值範圍 | 非零輸入介於 1e-300 至 1e300；詞法輸入下溢為零者會被拒絕 |
允許重複的標籤，且會以輸入順序保留為獨立的長條，工具不會將其彙總或排序。如果你的列數少了一個，那就是一個問題：一張圖表至少需要兩列非空白資料才有意義，且最多三十列，才能在水平捲動延伸出去的 520 像素預覽中保持可讀。解析器絕不會只保留前 30 列、略過錯誤列、替換為零，或是產出部分圖表。
逐步產生圖表
產出一張可下載 SVG 長條圖的完整工作流程，簡短到第一次使用就能記住。
- 開啟 Bar Chart Maker，並決定是否要加入標題。標題為選填；若留空，圖表仍會獲得可存取標籤「Bar chart」。
- 將你嚴格的 label,value 資料列貼入資料區域。每一非空白行即為一列，工具會忽略空白或僅含空白字元的行。
- 點擊 Generate。解析器要嘛接受所有列，要嘛以錯誤訊息拒絕整個請求。它絕不會只保留前 30 列、略過錯誤列，或將其替換為零。
- 檢視預覽。確認底部的類別標籤、左側由下而上的五個參考刻度值、零基準線，以及對全為零或極端範圍資料的任何明確註記。
- 將滑鼠游標移至長條上方以讀取工具提示。工具提示永遠會回報原始的數值，即使該長條因高度過低而難以與基準線區分。
- 點擊 Download SVG。該檔案是由你所檢視的同一段字串所構成的獨立 SVG，而非其重新渲染的版本。
編輯標題或資料區域會立即清除先前的預覽、狀態與下載。這讓反覆嘗試是安全的：每次點擊 Generate 都會從已知的空白狀態開始，因此你不會意外發佈到過時的檔案。Blob 建立或 URL 建立失敗會產生錯誤，絕不會回傳過時的下載。
解讀圖表：刻度、長條與工具提示
圖表產生後，預覽會沿著 x 軸以輸入順序，針對每一筆接受的列顯示一個矩形。左側為帶有五個等距參考刻度的垂直軸，底部則顯示經旋轉以容納較長標籤的類別標籤。基準線位於零，顯示的軸最大值位於繪圖區域頂端。
為了讓取整規則更明確，假設你的最大值是 73。73 之上下一個 1/2/5/10 乘以十的冪次的倍數是 100，因此圖表會顯示 0、25、50、75、100 作為五個刻度。同一條「整齊刻度」規則適用於所有輸入：上界會向上取整為有限的 1、2、5 或 10 乘以十的冪次的倍數，並以五個等距刻度呈現該範圍。軸標籤最多使用六位實用的有效數字或科學記號，這對一般小型資料集已經足夠，同時當需要精確分析時也能保留原始數字。這種確定性的方法並不保證重現 D3 的每一個刻度選擇，但確實代表相同的輸入永遠會產生相同的圖表。
每個長條都附帶一個顯示原始數值的工具提示。工具提示很重要，因為圖表刻意對線性刻度保持誠實。一個較小的正值與大很多的數值並列時，可能佔據不到三位小數的視覺高度，而難以與基準線區分；工具提示仍會回報該數值，因此資料絕不會被默默隱藏。SVG 也包含由標題或預設標籤衍生的可存取描述，而座標會四捨五入至小數三位，以確保每個邊界都是有限且有效的。
工具明確處理的邊界情況
有三種邊界情況常見到值得擁有專屬的處理方式，而非靜默的退路。
全為零的資料。當所有被接受的數值都是零時，圖表會使用明確的零到一參考範圍。每個長條都會以零高度坐落於基準線上，且圖表會顯示明確的全為零註記。這避免了除以零，同時保持所提供的數值不被更動，比悄悄換成最小高度長條更為誠實。
極端範圍。如果某一長條的數值比其他長條高出許多個數量級，較小的長條可能會低於 SVG 座標的解析度。工具拒絕虛構一個最小高度長條，因為這樣會破壞既定的線性刻度。工具提示仍會保留原始數值；當可見性比線性更重要時，採用對數刻度或另外分組的圖表才是正確的下一步。D3 對於線性刻度的說明文件 更深入地解釋了同樣的權衡取捨。
格式錯誤的輸入。單一錯誤列會拒絕整個請求。沒有部分圖表、沒有靜默替換，也沒有「只保留前 30 列」的行為。這樣的嚴格是刻意的，因為當圖表是要發佈的時候，部分輸出比沒有輸出更糟。
長條圖製作工具 vs. 主流圖表工具
把差異並列比較時會更容易看出來。
| 能力 | 長條圖製作工具 | 一般雲端圖表編輯器 |
|---|---|---|
| 需要註冊 | 否 | 通常在匯出或協作時需要 |
| 資料上傳到伺服器 | 否，所有內容都保留在目前分頁中 | 通常會，至少在儲存或分享時 |
| 輸入格式 | 嚴格的輕量 CSV，每列僅一個逗號 | 完整 CSV、試算表匯入或拖放 |
| 列數 | 2 到 30；31 列會拒絕整個請求 | 通常無限制，有時會較慢 |
| 刻度 | 確定性的線性刻度，搭配 1/2/5/10 的漂亮刻度值 | 通常可設定，預設有時會誤導 |
| 匯出格式 | 與預覽一致的獨立 SVG | PNG、PDF,SVG 有時需付費才能使用 |
| 預覽與輸出檔的一致性 | 兩者皆由同一段 SVG 字串產生 | 常會以不同版面重新渲染 |
| 費用 | 免費，無需帳號 | 免費方案搭配付費升級 |
這兩欄並非窮舉——許多雲端編輯器在協作、佈景主題和團隊資源庫方面其實非常優秀——但已能說明重點。長條圖製作工具適用於一種特定情境:資料量小、使用者重視隱私、圖表需要輸出成單一檔案，且該檔案必須與預覽畫面完全一致。對於想深入了解刻度與標籤選擇的讀者，關於挑選刻度與標籤的長條圖最佳實務指南以更詳細的方式說明同樣的「漂亮刻度值」思維。匯出的 SVG 本身遵循 W3C SVG 2 規範，使用標準的 rect、line、text、g 與 title 元素，因此該檔案可移植到任何現代瀏覽器或設計工具。
想深入了解，請參閱瀏覽器中的數學練習題產生器 API 替代方案。