長條圖產生器是一種基於瀏覽器的工具，可將一組少量的類別資料列轉換為垂直長條圖，並將該圖表原封不動地匯出為獨立的 SVG 檔案，所有解析、縮放、排版與下載動作都在本機完成。長條圖產生器接受 2 到 30 列嚴格的 label,value 資料，其中每個非空白列恰好包含一個逗號，前面為標籤，後面為一個非負有限數。一旦資料列通過驗證，工具會計算出一個確定性的線性刻度，將上界向上進位至 10 的冪次的 1、2、5 或 10 倍的整數倍數，在繪圖區中放置五個等距的參考刻度，並為每個接受的列繪製一根長條。同一段 SVG 字串同時驅動預覽與下載的檔案，因此您檢視到的內容就是您儲存的內容。完全不會上傳任何資料:標籤、數值、標題以及 SVG 本身都保留在您目前的瀏覽器分頁內。
長條圖產生器實際上在做什麼
從核心來看，長條圖產生器接收類別資料——也就是一組命名類別各自對應一個數值的清單——並將該清單轉換為視覺化的比較。每個類別變成一根長條，長條的高度代表該數值，加上基準線與參考刻度，讓讀者能感受量級。本文介紹的長條圖產生器完全在瀏覽器中執行，因此不需要試算表匯出、不需要帳號，也不需要與伺服器往返。您貼上資料列，工具就會進行解析、排版圖表，並提供一個可獨立使用的 SVG 供您儲存或嵌入。
「解析」這個切入角度之所以重要，是因為大多數通用的圖表工具都會隱藏它們究竟對您的數字做了什麼。它們可能對資料進行排序、依語意切換顏色，或在背後悄悄截斷您的輸入。相對地，確定性的長條圖產生器遵循一項固定的契約:您依提交順序送出的資料列，會依相同順序產生對應的長條;刻度僅依據您的數值計算;而下載的檔案與您在預覽中檢視的 SVG 字串逐位元組相同。這項契約正是讓輸出可預測且值得信賴的關鍵。
解析器內部:精簡 CSV 資料列與精確限制
長條圖產生器採用一種刻意嚴格的輸入格式，稱為精簡 CSV。每一個非空白列必須恰好包含一個逗號，前面為標籤，後面為一個數值標記。空白列或僅含空白的行會被忽略。不支援引號欄位、引號逗號、額外欄位、空標籤、型別化的單位、公式、十六進位數字、Infinity 與 NaN。會自動去除每個標籤與數值前後的空白。標籤最多包含 24 個 UTF-16 程式碼單位，數值標記最多 40 個;超過這項精確限制一個程式碼單位，整個請求就會失敗。
解析器絕不接受部分輸入。如果您貼上 31 列，生成作業會以實際的非空白列數回報失敗;工具不會默默僅保留前 30 列。如果某一列格式錯誤，整張圖表會被拒絕，而不是略過錯誤列或代入零。接受的列會依輸入順序精確驅動圖表，重複的標籤仍會以獨立的長條呈現。
| 輸入格式 | 結果 |
|---|---|
| Apples,12 | 接受為一列 |
| Apples, 12 | 接受;會自動去除前後空白 |
| "Apples, red",12 | 拒絕;不支援引號欄位與引號逗號 |
| Apples,12,kg | 拒絕;不支援額外欄位 |
| Apples， | 拒絕;數值標記為空 |
| ,12 | 拒絕;標籤為空 |
| Apples,-5 | 拒絕;數值必須為非負 |
| Apples,1e-301 | 拒絕;低於 1e-300 的非零輸入會下溢 |
| 31 列有效資料 | 拒絕;整個請求失敗 |
數值必須為非負的有限十進位數。接受一般小數與使用 e 或 E 的科學記號表示法，負零會正規化為零。支援 1e-300 到 1e300 之間的非零數值;字面上為非零但下溢為零的輸入，以及任何超過最大值的輸入都會被拒絕。這樣的嚴格性正是讓解析器保持快速、可預測，並避免那些試圖寬鬆處理但造成「為什麼我的圖表看起來怪怪的」驚喜的工具所帶來的困擾。
線性刻度與 1、2、5、10 的「漂亮上界」範圍
長條高度採用非負的線性刻度。零對應到基準線，而顯示的座標軸最大值對應到繪圖區頂端。上界並非僅等於資料中的最大值;而是會向上進位至 10 的冪次的 1、2、5 或 10 倍的整數有限倍數，並透過五個等距的參考刻度呈現該範圍。這就是 D3 線性刻度 等圖表函式庫所使用的「漂亮範圍 (nice domain)」做法，透過選擇進位後的上界，讓刻度標籤落在乾淨的數字上，而不是尷尬的分數。
舉例來說，如果您接受的資料列為 Apples,12、Pears,27、Plums,8 與 Grapes,35，則最大值為 35。漂亮的上界會將 35 向上進位至下一個 10 的冪次的 1、2、5 或 10 倍，也就是 50。五個等距刻度接著會落在 0、12.5、25、37.5 與 50，讓每根長條都有乾淨的參考線。無論最大值是 4(漂亮上界 5)、73(漂亮上界 100)或 412(漂亮上界 500)，都適用相同的邏輯。
這種由產品定義的漂亮範圍做法是確定性的，但並不保證重現 D3 的每一種刻度選擇。它也不使用對數刻度、不正規化為百分比，也不暗示任何統計顯著性。座標軸標籤最多使用六個實用的有效數字或科學記號，以便接近座標軸頂端的數值仍保持可讀性。若需精確的分析工作，請保留您的原始數字，而不是從圖表上反向讀取。
從排版到獨立 SVG:為何預覽等同於下載
資料列解析完成、刻度確定後，圖表會以 SVG 標記進行排版。輸出高度為 520 像素，寬度則隨資料列增加而水平展開;類別槽位保持分隔，較寬的圖表在預覽中會以捲動方式呈現，而非將 30 個標籤擠進行動裝置的寬度。座標皆為有限值，經過邊界驗證，並以三位小數四捨五入後寫入標記。座標軸標籤遵循相同的四捨五入規則，圖表使用標準的 rect、line、text、g 與 title 元素，並遵循 W3C SVG 命名空間。
每一個使用者字串在進入任何文位元組點、工具提示、標題或無障礙屬性之前，都會先經過 XML 逸脫處理。& 符號、角引號、引號與撇號會轉為實體，而 XML 不允許的控制字元或未配對的代理項會變為 U+FFFD。數值座標僅來自經驗證的有限值，因此即便是像 <script> 這類看似指令碼的標籤，在 SVG 中仍會以可見文字呈現，而不會成為實際的活動元素。即使可見標題為空白，仍會獲得「Bar chart」的無障礙標籤，讓螢幕閱讀器始終有內容可朗讀。
同一段產生的 SVG 字串同時驅動預覽與檔案下載。成功生成時會由該字串建立單一 Blob URL，並由下載錨點使用該 URL。當您編輯標題或資料、當結果被取代、當生成失敗，或是當元件卸載時，該 Blob URL 都會被撤銷，藉此避免立即撤銷導致的下載競爭，以及累積的 ObjectURL 洩漏。若 Blob 建立或 URL 建立失敗，您會看到錯誤訊息，而不會留下任何失效的下載。您可以參閱 SVG 2 規格 以了解底層元素的語意。
逐步使用長條圖產生器
- 開啟長條圖產生器，並在標題欄位中輸入選填的標題;即使標題為空白，仍會獲得「Bar chart」的無障礙標籤。
- 以 2 到 30 列非空白資料列貼上您的資料，每列寫成 label,value，恰好包含一個逗號，且逗號後為一個非負有限數。
- 點擊生成並閱讀狀態:成功代表所有資料列皆被接受，預覽會顯示類別標籤、五個刻度值、基準線、零值，以及任何極端範圍的可見度限制。
- 匯出前，檢查預覽中的類別標籤、刻度間距、長條順序、工具提示數值，以及任何極端範圍的警告。
- 點擊下載按鈕以儲存獨立的 SVG;下載的檔案與預覽標記完全一致。
- 若需要修改圖表，請編輯標題或資料;先前的預覽、狀態與下載會自動清除，下一次生成會建立全新的 SVG 與 Blob URL。
如需快速查閱上述語法與限制的摘要，長條圖產生器速查表:語法、限制與輸出 將相同的規則彙整於同一處。
會改變圖表的限制:零值、極端值與全為零的資料
有兩種情況值得特別注意，因為它們會改變圖表的呈現結果，卻不會改變您的輸入。第一，全為零的資料會使用明確的零到一參考範圍，讓所有長條維持零高度，並顯示明確的全為零註記。這樣可避免除以零，同時不會悄悄變更您提供的數值。
第二，極為寬廣的數值範圍，可能會讓正向長條在 SVG 座標精度下與零視覺上難以區分。長條的工具提示仍會回報數值，因此資料並未遺失，但可見高度可能會四捨五入為零。工具不會自行產生最小高度長條，因為這樣會違反所聲明的線性刻度。若需要更完整的指南來為這類資料選擇刻度與標籤，請參閱 長條圖最佳實務文章:刻度與標籤。當微小的類別必須在數值高出數百個數量級的項目旁仍保持可見時，對數圖表或分組呈現的圖表才是合適的工具，而非在同一張線性圖中以變通方式處理。
最後，此圖表不會進行彙總、排序、推論單位、依語意挑選顏色、求值公式、抓取資料、解析完整 CSV、建立點陣圖，也不會加入圖例或資料序列。它同樣不會驗證圖表是否負責任地傳達資訊。發布前請自行檢查標籤、座標軸範圍、零值處理、極端刻度的可見度與工具提示。這些檢查是您的責任，而非工具的責任，也是技術上正確的圖表與真正清晰的圖表之間的差別。