Matplotlib 用 plt.bar(x, height) 把一份類別標籤與數值的清單，變成一張垂直長條圖，但你不必寫 Python 也能產出相同的結果——只要把 2 到 30 行嚴格格式的「標籤,數值」貼進長條圖產生器，並把預覽結果匯出成一個獨立的 SVG 檔案即可。這個瀏覽器工具用一個「產生」按鈕，取代了 import 陳述式、圖形建立呼叫，以及 savefig 那一行，然後產出一張高度 520 像素的 SVG，具有固定的線性 y 軸、一個位於零的基準線，以及五個等距分布的參考刻度。搜尋 matplotlib 教學的人，通常想要三樣東西：從一小份資料集快速畫出一張看得見的圖表的捷徑、對長條與座標軸刻度外觀可預期的掌控，以及一個可以直接放進投影片、文件或網頁的可攜檔案。這個瀏覽器工具三者都涵蓋到了，但有一項取捨值得事先了解：它刻意設計得很窄，接受的是精簡版 CSV 行而不是完整的 CSV，使用固定的線性刻度而不是 matplotlib 可選的對數刻度，並且完全在目前這個分頁中執行，而不是透過 Python 直譯器。同一份匯出檔案同時驅動可見的預覽與 Blob 下載，所以你看到的就是你要儲存的那個確切檔案。本文接下來會逐一說明這個工具接受什麼、計算什麼，以及如何在下載前驗證這份 SVG。
針對這份資料，matplotlib 會畫出什麼
針對一份小型類別資料集，matplotlib 的做法大致如下。假設你有五個水果類別，銷售數量分別是 73、45、60、28 和 12。在一般的 matplotlib 腳本中，你會建立兩份平行的清單，呼叫 plt.bar(labels, values)，可選擇性地用 ax.set_title(...) 加上標題，再用 plt.savefig("fruit_sales.svg") 存檔。預設行為會給你五根垂直長條、一個位於零的基準線，以及少量的參考刻度，這些刻度的確切位置由 matplotlib 內部決定。輸出結果雖然是可攜的，但你仍然需要一個可運作的 Python 環境、一個已安裝的 matplotlib 套件，以及足夠多的來回切換，才能讓腳本、資料與圖形檔案保持同步。
以瀏覽器為基礎的長條圖產生器，則從相反的方向抵達同一個終點。貼上資料，點一下，預覽就會顯示出 matplotlib 原本會畫出的內容：五根垂直長條、一個位於零的基準線、五個參考刻度、一個選填的標題，以及每根長條下方一個旋轉過的類別標籤。圖表高度固定為 520 像素；隨著類別增加，它的寬度會跟著變大，而當 30 個標籤在一個窄螢幕上會被擠在一起時，預覽區會改為水平捲動。
這個瀏覽器工具強制執行的輸入規則
因為這個工具刻意設計得很窄，每一筆輸入都必須遵循嚴格的格式。可接受的形式是「標籤,數值」——一個標籤、恰好一個逗號，以及一個數字符記——並重複至少兩行、最多三十行非空白的紀錄。空白或只有空白字元的行會被忽略。標籤最多可以含有 24 個 UTF-16 碼元，數字符記最多可以含有 40 個。只要超出其中任何一項限制一個碼元，整個請求就會失敗。這個剖析器絕不會悄悄只保留前 30 行、跳過一個有問題的行、用零替代缺失的值，或回傳一張不完整的圖表。
在數值這一側，只接受非負的有限十進位數字。像 12.75 這樣的一般小數，以及像 1.2e3 這樣的科學記號，都是允許的。負零會被正規化為零。低估到變成零的字面輸入、超過 1e300 的輸入、十六進位、Infinity、NaN、運算式、帶單位的輸入、加了引號的欄位、額外的欄位，以及空白標籤，全部都會被拒絕。重複的標籤在輸入順序中仍然維持為獨立的長條；這個工具不會做彙總、排序，或推斷單位。每個標籤與數字前後的空白字元會自動被去除。
| 輸入範例 | 結果 |
|---|---|
| Apples, 73 | 接受 |
| Bananas,12 | 接受（空白會被去除） |
| Oranges, 1.2e2 | 接受（科學記號） |
| Grapes, -5 | 拒絕（負值） |
| Plums, NaN | 拒絕（非有限數字） |
| "Fuji, Red", 8 | 拒絕（帶引號的欄位） |
| Pears, 45, 60 | 拒絕（兩個逗號） |
| ,73 | 拒絕（空白標籤） |
| 空白行 | 忽略 |
不寫 Python 也能建立同樣的圖表
- 輸入一個選填的標題，並把你 2 到 30 行嚴格格式的「標籤,數值」貼進輸入區。每一個非空白行都必須恰好含有一個逗號，左邊是標籤，右邊是一個非負的有限數字。
- 點擊產生，並檢視預覽。確認類別標籤讀起來正確、五個參考刻度呈現出完整的範圍、基準線位於零，且沒有任何一根長條因為數值範圍過於極端而細到肉眼看不見。
- 點擊下載 SVG 來儲存檔案。下載出來的字串與預覽中顯示的標記完全相同，這個檔案是一份帶有 W3C 命名空間的獨立 SVG，而剖析、版面配置、預覽與下載全都留在目前這個瀏覽器分頁中。
編輯標題或資料，會立即清除先前的預覽、狀態訊息與下載連結，所以一張過期的圖表永遠不會滲入新的結果中。下載出來的 SVG 可以直接在瀏覽器中開啟、放進簡報，或貼進 HTML——它不依賴任何外部的樣式表或指令碼。
線性刻度與參考刻度是如何決定的
長條圖產生器使用的是一套確定性的、由產品自行定義的「整潔值域」做法，而不是重現 matplotlib 內部的刻度演算法。長條高度等於數值乘以繪圖高度，再除以顯示出來的座標軸最大值，所以資料集中最大的數值，決定了最頂端刻度的位置。顯示出來的最大值，會無條件進位到嚴格大於該最大值的下一個十的次方的 1、2、5 或 10 倍數。接著五個等距分布的參考刻度會呈現出這個範圍。
舉一個具體的例子，假設一份資料集中最大的數值是 73。數值 73 落在區間 [10, 100) 內，所以參考的十的次方是 10² = 100。100 的 1/2/5/10 倍數分別是 100、200、500 與 1000。第一個嚴格大於 73 的倍數是 100，所以顯示出來的座標軸最大值就是 100。五個參考刻度分別是 0、25、50、75 與 100。一根數值為 25 的長條，高度就恰好是繪圖高度的四分之一。座標會四捨五入到小數點後三位以寫入標記，而座標軸標籤在範圍需要時，最多會使用六位實用的有效數字，或改用科學記號。
當資料集中每一個值都是零時，圖表會切換成一個明確的零到一參考範圍，讓每一根長條的高度都維持在基準線上的零，並加上一則全零註記。這樣能避免除以零的錯誤，同時不會改動所提供的數值。
matplotlib 處理方式不同的邊界情況
有三種行為值得留意，因為它們和典型 matplotlib 預設執行的結果不同。
- 極端的數值範圍。當某一個類別的數值比另一個大上幾百個數量級時，較小長條的像素高度可能會低於 SVG 座標的精確度，看起來像消失了一樣。工具提示仍然會回報實際數值，但當較小的類別必須維持視覺上可辨識時，對數座標或分開分組的圖表才是正確的工具。
- 負值或非有限值。這個剖析器會拒絕整份資料集，而不是跳過一個有問題的行，所以一個打字錯誤就會讓整個產生流程停止。這比 matplotlib 更嚴格，因為 matplotlib 對一個負值會悄悄畫出一根朝下的長條。
- 沒有對數刻度，也沒有百分比正規化。這個工具不會切換成對數刻度、把長條正規化成總數的百分比，或暗示任何統計上的顯著性。如果閱聽眾需要比較整體中各部分的占比，圓餅圖是更好的選擇。
matplotlib 與長條圖產生器一覽
| 面向 | matplotlib | 長條圖產生器 |
|---|---|---|
| 執行環境 | 已安裝 matplotlib 的 Python 直譯器 | 目前的瀏覽器分頁，不需安裝 |
| 輸入形式 | 清單、陣列，或 pandas DataFrame | 2 到 30 行嚴格格式的「標籤,數值」 |
| 刻度類型 | 線性或對數 | 僅線性 |
| 刻度計算方式 | matplotlib 內部演算法 | 1/2/5/10 整潔上限、五個固定刻度 |
| 輸出格式 | PNG、PDF、SVG 及其他格式 | 僅獨立 SVG |
| 資料上傳 | 除非明確存到線上，否則留在本地端 | 永遠不會離開瀏覽器分頁 |
| 是否需要程式碼 | 是 | 否 |
對一個 matplotlib 使用者來說，實際要做的判斷是：這份資料集是否小到符合條件（2 到 30 個類別），並且乾淨到符合條件（非負的有限數值、標籤中不含逗號），足以套進這個瀏覽器工具的嚴格格式。當條件符合時，這條瀏覽器路徑用三次點擊，取代了一行 import 陳述式、一次圖形建立呼叫、一行 savefig，以及一次終端機執行。
下載前驗證這份 SVG
驅動預覽的那唯一一份 SVG 字串，正是變成下載 Blob 的同一份字串，所以你檢視過的圖表，就是你收到的圖表。這個檔案使用 W3C SVG 命名空間，以及標準的 rect、line、text、g 與 title 元素，這代表它能在支援 SVG 的現代瀏覽器、設計工具與文件編輯器中正確算繪。使用者輸入的字串在進入文字、工具提示、標題或無障礙屬性之前，都會先經過 XML 逸出處理——&、<、> 以及引號、撇號都會變成實體，而 XML 中禁止出現的控制字元則會變成 U+FFFD。因此，一個看起來像指令碼的標籤，仍然會維持是可見的文字，而不會變成一個 SVG 元素。
座標永遠是根據已驗證的有限數值繪製，並四捨五入到小數點後三位，所以標記中不可能出現超出邊界或非有限的座標。一個留白的可見標題，仍然會取得可存取的標籤「Bar chart」，這讓輸出結果對螢幕閱讀器友善。當標題或資料被編輯、結果被替換、發生產生錯誤，或元件被卸載時，Blob URL 都會被撤銷，所以既不會出現立即撤銷造成的下載競速，也不會出現累積的 ObjectURL 洩漏。關於底層標記的權威參考，請見W3C SVG 2 規範；至於這個工具所模仿的那種線性刻度，請見D3 線性刻度文件。
如果你還在考慮選項，如何在 PowerPoint 中用 3 個步驟製作圓餅圖這篇文章有詳細說明。
如果你還在考慮選項，不寫程式碼、在 Python 中產生隨機字母這篇文章有詳細說明。