一個不需要註冊的長條圖產生器是一種瀏覽器工具，可以把一小串類別標籤和數值轉成可下載的長條圖，不需要建立帳號、安裝軟體，或把資料送到遠端伺服器。長條圖產生器完全符合這樣的描述:你貼上 2 到 30 筆嚴格的 label,value 列，直立長條圖就會出現在你的分頁中，而你下載的獨立 SVG 是根據預覽中顯示的完全相同標記所產生。沒有註冊牆，也沒有伺服器來回往返，因為從剖析到 Blob 建立的每一步都在當前頁面中完成。這樣的設定對快速比較、課堂範例、部落格圖表、內部報告，以及任何不適合或根本不值得把底層數字上傳到第三方的情境都很實用。它的權衡是這個工具有意地範圍很窄:它接受嚴格的精簡 CSV 格式、繪製線性刻度，並產生乾淨、不含圖例、數列或依意義上色的 SVG。
「免註冊」對長條圖產生器來說代表什麼
免註冊的長條圖產生器是一個精簡的純前端工具:頁面本身就包含剖析器、版面配置、預覽渲染器，以及 SVG 序列化器，所以打開頁面就是唯一的入門步驟。你的標題、標籤、數值或產生的檔案都不會離開這個分頁，這就是「不需帳號」承諾的實際意義。長條圖產生器就是這樣運作;它的輸入是一小段精簡 CSV 區塊，輸出則是單一 SVG 字串，而下載按鈕會交給你一個由你在預覽區看到的同一段字串所建立的 Blob。由於沒有伺服器，所以也沒有儲存的歷史紀錄、共享工作區或留言串:圖表從你按下下載那一刻起就是你的，並在頁面關閉的那一刻就消失。
免註冊設計的權衡，就是完全在瀏覽器中執行的限制。代價是完全在瀏覽器中執行的限制。例如，剖析器強制使用嚴格的列格式，因為頁面必須在沒有任何後端協助的情況下拒絕錯誤的輸入，而版面配置採用決定論的 1/2/5/10 整齊刻度網域，而不是手動調整的座標軸。對大多數快速的工作來說，這樣的組合正是大家想要的:貼上列資料，看到乾淨的圖表，儲存 SVG。
如何使用長條圖產生器製作長條圖
完整的工作流程只需要三個操作步驟，每一步都留在你的瀏覽器分頁中。
- 貼上 2 到 30 筆嚴格的列。輸入或貼上一個區塊，其中每個非空白行都是一個以 label,value 撰寫的類別，且只有一個逗號。在資料區塊上方可以加上一個選擇性的標題。會修剪標籤和數字周圍的空白，會忽略空白行，而任何違反規則的非空白列會導致整個請求被拒絕，而不是部分接受。
- 產生並驗證預覽。執行產生器以渲染一個直立長條圖，其中包含基線、五個等距的數值刻度、旋轉的類別標籤、工具提示，以及無障礙描述。回頭讀一次類別標籤，確認刻度值符合預期範圍，如果你的資料是退化的，則留意是否有全為零的提示。
- 下載獨立 SVG。點擊下載動作以接收由預覽中所用的同一段 SVG 字串所建立的 Blob URL。匯出的檔案是一個獨立的 520 像素高的 SVG，不需要外部資產或額外字型，就能在任何瀏覽器、編輯器或設計工具中開啟。
在成功產生後編輯標題或資料區塊，會立刻清除先前的預覽、狀態文字和下載，因此過時的圖表絕不會混入新的資料集。Blob URL 會在編輯、被取代的結果、失敗時，以及卸載時被撤銷，這同時避免了立即撤銷的下載競爭以及 ObjectURL 的累積洩漏。
精簡 CSV 格式:你貼上的精確內容
精簡 CSV 是對完整 CSV 刻意的簡化。由於頁面必須自行拒絕錯誤的輸入，剖析器對於怎樣算是一筆有效的列非常嚴格。下方的規則就是長條圖產生器強制執行的，也是你第一次就成功產生圖表所需要知道的全部內容。
| 元素 | 接受 | 拒絕 |
|---|---|---|
| 每次請求的列數 | 2 到 30 個非空白列 | 1 列或 31 列以上 |
| 每個非空白列的逗號數 | 剛好一個 | 零個、兩個以上，或加引號的逗號 |
| 標籤內容 | 修剪後最多 24 個 UTF-16 碼位的純文字 | 空標籤、多餘欄位、嵌入的逗號 |
| 數值 token | 非負有限小數或 e/E 記號，最多 40 個字元 | 負數、單位、十六進位、NaN、Infinity、運算式 |
| 數值範圍 | 詞彙剖析後介於 1e-300 到 1e300 | 溢位歸零的 token，或超過 1e300 |
負零會被正規化為零，而不是被拒絕。每個標籤和數字周圍的前後空白都會被修剪，因此不小心多打的空白不會導致該列失敗。重複的標籤是被允許的，並會依輸入順序保持為獨立的長條，當同一類別出現在不相鄰的列時，這項特性很實用。剖析器絕不會只保留前 30 列、跳過錯誤的列、替換為零，或呈現部分圖表。如需更精簡的語法參考，長條圖產生器關於語法、限制與輸出的速查表將所有規則集中在一頁。
預覽顯示的內容，以及下載前需要檢查的事項
預覽是下載內容唯一誠實的呈現，因為下載和預覽由同一段 SVG 字串驅動。圖表包含一條水平基線、一條帶有五個等距參考刻度的垂直座標軸、每筆接受的列一根長條、旋轉的類別標籤、選擇性的標題、每根長條上的工具提示，以及一個當可見標題留空時會將圖表命名為「Bar chart」的無障礙描述。
在你按下下載之前，請依下列簡短檢查清單逐項確認:
- 類別標籤。以 SVG 中呈現的角度回讀每一個，以便找出任何被截斷或錯誤的字元。
- 刻度值。確認這五個刻度涵蓋你資料的完整範圍，包括進位後的上界。
- 零與基線。確認高度為零的長條貼齊基線，而不是消失在角落中。
- 極端範圍的可見度。如果有一個數值比其他數值高出許多個數量級，那麼一個小的正值長條在 SVG 座標精度下可能會變得看不見。工具提示仍會回報該數值，但視覺上看起來像一條平直的線。
- 全為零的狀態。如果每個值都為零，圖表會採用明確的零到一的參考範圍，將每根長條維持在零高度，並顯示一則全為零的提示，而不是除以零。
上方的座標軸上界會進位到一個有限的 1、2、5 或 10 的十倍數倍數，這是一種決定論的整齊刻度網域作法，類似於 D3 的線性刻度 建議的刻度值方式。長條圖產生器並不保證重現 D3 的每一個刻度選擇;它保證的是一個穩定、可預測的座標軸，在每次貼上相同輸入時都呈現相同的資料範圍。
SVG 匯出:一段字串，一個檔案
下載的是一個獨立的 SVG 檔，而不是一個打包好的專案。每一個座標都是有限的、邊界經過驗證，且標記中的數值會四捨五入到小數三位;每一段使用者字串在進入文字、工具提示、標題或無障礙屬性之前都會進行 XML 跳脫;XML 禁止的控制字元和未配對的代理項會被替換為 U+FFFD。這就是這個檔案能夠放心地丟進 CMS、簡報，或其他支援 SVG 的工具中而不會出現意外行為的原因。匯出的標記採用 W3C SVG 2 命名空間，以及標準的 rect、line、text、g 和 title 元素，使其在渲染層級上與 W3C SVG 2 規範 相容。
圖表高度為 520 像素，並隨著列數增加而水平擴展。類別欄位會保持間隔;預覽會水平捲動，而不是把 30 個旋轉標籤塞進行動裝置的寬度。座標軸標籤最多使用六個實際有效位數或科學記號，足以在不出錯的情況下顯示資料範圍;如果你需要精確的分析，請把原始數字和 SVG 放在一起。由於 Blob URL 是由預覽中使用的同一段字串所建立，因此你檢視過的內容和儲存的內容之間不會有偏差。
什麼時候「免註冊的長條圖產生器」不是合適的工具
讓長條圖產生器又快又私密的那些特性，同時也讓它在某些工作上成為錯誤的工具。它不會進行彙總、排序、推測單位、求值公式、剖析完整 CSV、抓取資料，或產生像 PNG 這樣的點陣圖。沒有圖例、沒有數列、沒有依意義上色的選擇，也沒有統計顯著性的框架;圖表只是你所貼上列資料的忠實線性呈現，僅此而已。如果你需要橫向呈現、分組或堆疊長條、百分比正規化，或對數座標軸，那麼這個頁面不適合硬要它做這些事。
對於數值範圍極寬的資料，請考慮在貼上之前先排序或拆分，或者改用對數圖表，讓微小的類別在比它大數百個數量級的值旁仍能保持可見。對於已經存在於試算表中的資料集，通常最短的做法是把標籤欄和數值欄複製到兩個純文字欄位中，然後匯出成 label,value 列。對於任何會被讀成一種主張的圖表，在發佈前再多過一遍標籤、座標軸範圍、零的處理、極端尺度的可見度，以及工具提示;這個工具對它畫出的東西是誠實的，但它並不會檢查圖表是否負責任地傳達資訊。
延伸閱讀:免費免註冊的讚美產生器:從 24 個提示中挑選。