給初學者用的長條圖製作工具，是一個小巧的瀏覽器小工具，可以把兩列到三十列的「標籤，數值」文字，轉換成乾淨的垂直長條圖，讓你預覽並下載成獨立的 SVG 檔案。整個流程都在你目前的分頁中執行，因此你不需要安裝軟體、開啟試算表，或將資料上傳到任何地方。你只需貼上一段簡短的清單，其中每個非空白列剛好包含一個逗號、設定一個可選的標題，工具就會為每個類別畫一條長條，並附上基線、五個數值參考刻度、旋轉的類別標籤、懸停提示框，以及無障礙說明。因為同一段 SVG 字串同時驅動預覽與 Blob 下載，你看到的與實際儲存的完全一致。編輯標題或資料會在新圖表建立前先清除先前的結果，讓你可以反覆嘗試而不會出意外。工作時沒有任何資料會離開你的瀏覽器，而匯出的檔案是一個自足的向量檔，你可以在任何設計工具中開啟，或貼入文件中。
一個對初學者友善的長條圖製作工具到底能做什麼
「給初學者的長條圖製作工具」這個詞通常代表三件事同時運作：一種你可以手動輸入的小型資料格式、一個會自動決定座標軸的圖表，以及一個可以儲存的單一檔案。長條圖製作工具正好符合這個描述。你給它介於兩列到三十列的類別資料，它會回傳一個垂直長條圖，包含清楚的基線、等距的參考刻度、旋轉的類別標籤、懸停提示框，以及無障礙說明。沒有登入、沒有專案檔，也不需要建立帳號。
圖表採用非負值的線性刻度，因此基線永遠是零，而資料集中最高的長條決定繪圖區域的頂端。座標軸最大值會進位到 1、2、5 或 10 的十的整數倍，五個等距的參考刻度會顯示這個範圍。這對第一次使用的使用者很重要，因為每次點擊「產生」時都會以相同方式套用同一個刻度公式，這代表用同一份資料執行兩次會產生同一張圖。如果你想要不同的視覺結果，就去改資料；你不需要和工具搏鬥。
匯出的檔案是一個獨立的 SVG，由預覽中顯示的同一段字串所組成。因為預覽與 Blob 下載來自同一個來源，儲存的檔案會與你檢視過的標記完全一致。整個管線——解析、排版、SVG 產生、預覽、Blob 建立與匯出——全部都留在目前的瀏覽器分頁中。
在開啟工具前先把資料準備好
在開啟工具之前，請在任何純文字編輯器中準備你的資料——筆記應用程式、Email 草稿、程式碼編輯器都可以。格式刻意設計得很精簡：每一列代表一個類別，逗號左邊是標籤，右邊是一個數字。標籤最多可包含 24 個 UTF-16 程式碼單元（對一般文字來說大約是 24 個可見字元），數值符記最多可包含 40 個。每個欄位前後的空白會自動去除。空白行會被略過。
為了避免產生失敗，請依下表的規則檢查你的清單。每個非空白列必須剛好包含一個逗號、逗號前是標籤、逗號後是一個非負值的數值符記。任何不符合規定的內容都會讓整個請求失敗，而不是產生一張不完整的圖表。
| 輸入列 | 是否接受？ | 原因 |
|---|---|---|
| Apples,12 | 是 | 一個逗號、標籤在前、整數在後 |
| Apples, 1.5e2 | 是 | 支援科學記號，且會去除空白 |
| Apples, 12 | 是 | 數字周圍的空格會在解析前移除 |
| "Apples, pears", 12 | 否 | 引號欄位與引號內的逗號不屬於精簡 CSV 格式的一部分 |
| 12, Apples | 否 | 標籤必須出現在逗號之前 |
| Apples, 12, 3 | 否 | 一列中含超過一個逗號會拒絕整個產生作業 |
| Apples， | 否 | 空白的數值符記會被拒絕 |
| ,12 | 否 | 空白的標籤會被拒絕 |
| Apples, -3 | 否 | 數值必須是非負值 |
| Apples, NaN | 否 | 不支援 NaN、Infinity、運算式與十六進位 |
在你按下任何按鈕之前，還有一件事值得注意：如果你的資料集非常大，你需要使用不同的工具。長條圖製作工具接受兩列到三十列的非空白列。貼上三十一列會讓整個請求失敗並回報確切數量，因此工具絕不會悄悄保留前三十列而丟棄剩下的。如果你有超過三十個類別，請在貼上前先進行分組、彙總或分割。
用三個簡短步驟製作你的第一張圖表
當你的資料列都清理過後，剩下的工作流程小到可以寫在一張便利貼上。長條圖製作工具會引導你完成三個動作：一個可選的標題、資料列本身，以及儲存檔案前的最後檢查。
- 新增一個可選的標題。如果不需要就留空——空白的標題仍會獲得「Bar chart」這個無障礙標籤。當圖表會嵌入到較長的文件中時，標題很有用，因為它會成為對螢幕閱讀器友善的說明。
- 貼上你的資料列。在資料欄位中輸入或貼上介於兩到三十列之間的非空白列。每一列需要剛好一個逗號、左邊是標籤、右邊是一個非負值。解析器會去除空白、忽略空白行，並在看到格式錯誤的列時立即停止。
- 產生、檢查並下載。點擊「產生」按鈕。預覽會顯示每個被接受的列一條長條，以及基線、五個參考刻度、旋轉的類別標籤和提示框。檢視圖表後，使用下載按鈕儲存獨立的 SVG。下載的檔案是根據你剛剛檢視的同一段字串所產生，因此看到的與所儲存的一致。
如果你在成功產生後變更標題或資料，先前的預覽、狀態訊息與下載連結會立即清除。這可以避免初學者最常掉入的陷阱——下載一張已經與螢幕上內容不再相符的圖表。對第一次使用的使用者來說，編輯也是大部分反覆調整發生的地方，因為只要小幅調整一個數值就能看出線性刻度如何反應。
解讀工具剛剛建立的圖表
預覽是唯一能確認圖表是否真的傳達你預期內容的地方，初學者只需要看五個部分就能感到有信心。下表整理了這五個部分。每一個元素都是獨立 SVG 的一部分，並依據 W3C SVG 2 規範 製作，使用標準的 rect、line、text、g 與 title 元素。
| 元素 | 顯示內容 | 初學者為何應該在意 |
|---|---|---|
| 基線 | y 軸上的零 | 讓你清楚看出哪些長條是從零開始，而不是憑感覺猜測 |
| 五個參考刻度 | y 軸上的數值標籤 | 幫助快速估計長條的高度 |
| 旋轉的類別標籤 | 每條長條下方的名稱 | 避免在較寬的圖表中發生標籤重疊 |
| 懸停時的提示框 | 精確的數值 | 讓非常小的長條無法以視覺呈現的資料得以保留 |
| 無障礙說明 | 對螢幕閱讀器友善的標題文字 | 讓圖表在分享時仍保有原本的意義 |
圖表高度為 520 像素，並會隨著新增的列數水平擴張，因此較寬的圖表會在預覽中捲動，而不是把三十個標籤硬塞進行動裝置的寬度中。座標會經過驗證，標記中會四捨五入到三位小數，並使用 W3C 命名空間。使用者字串（標籤、標題和提示框文字）在進入標記前會經過 XML 跳脫，這就是為什麼你的類別名稱中的 &、角括號或單引號會變成實體，而不是瀏覽器嘗試解讀的內容。類指令碼的標籤會保留為可見文字，而不會被當成 SVG 元素處理。
工具拒絕替你犯的初學者錯誤
初學者常常會期待圖表工具能代替他們「修正」雜亂的資料。長條圖製作工具採取相反的立場：它嚴格驗證輸入，拒絕自行捏造數值。下表列出某些工具會默默執行的行為，而這個工具刻意不會這麼做。
- 不默默截斷。貼上三十一列非空白列會讓產生作業失敗，而不是只保留前三十列。
- 不略過資料列。一個格式錯誤的列會拒絕整個請求——工具絕不會跳過壞列而保留好的列。
- 不進行零值替換。錯誤的數值符記不會被替換成 0；它會直接停止產生作業。
- 不進行排序、彙總或單位推斷。重複的標籤會依輸入順序保留為各自獨立的長條。工具不會新增圖例、推斷單位或將類別分組。
- 不使用對數刻度。y 軸永遠是線性的，基線在零。如果你的最大值遠大於最小值，小長條在 SVG 座標精度下可能會在視覺上與零無法區分。提示框仍會回報數值；若要讓小數值清楚可見，你需要對數刻度或另一張圖表，這是一個刻意的設計界線。
- 不使用最小高度的手法。工具不會為了讓小數值可見而捏造一個小小的長條高度，因為這會誤導線性刻度的意義。
- 不做百分比標準化或顯著性檢定。圖表會顯示你貼上的精確數字，採用資料本身所暗示的精確刻度。
有兩個特殊情況值得特別說明。當所有數值都是零時，圖表會切換到明確的零到一參考範圍，讓長條以零高度貼在基線上，並出現一個小型的「全為零」註記。這避免了除以零的錯誤，同時不捏造任何數值。而當數值符記為負零時，它會在繪製前被標準化為零。D3 線性刻度參考 說明了為什麼一個乾淨的上限（1、2、5 或 10 的十的整數倍）能讓座標軸標籤易於閱讀。
Where to Use the First Chart You Just Downloaded
A standalone SVG opens in almost any modern program: a browser, a design tool, a slide editor, a word processor, or an illustration app. Because the file is plain XML with no scripts or external assets, it travels well. For a beginner, three first uses tend to cover most everyday needs.
- School or coursework. Drop the SVG into a report, a slide deck, or a learning journal. The accessible description travels with the file, so assistive technology can describe the chart in context.
- Blog posts and documentation. Inline an SVG directly in HTML, or upload it to a CMS that accepts vector uploads. Because coordinates are validated, the chart renders crisply at any zoom level.
- Internal reports and dashboards. Hand the SVG to a teammate or paste it into a shared document. Anyone who can open a vector file can read the chart without installing the tool.
Once you have made your first chart, a few guides can take you further without leaving the same CSV-lite approach. The walkthrough on making a bar chart from any list of numbers is a useful next step when you want to turn a free-form list into clean rows, and the same Bar Chart Maker accepts the result directly.
If you're weighing options, Compliment Generator for Beginners: Quick Start Guide covers this in detail.