如何從 CSV 製作表格圖表

表格圖表是一個結構化的網格，由帶有標籤的列與欄組成，能讓每一個原始數值都以文字形式清楚可讀，而不是把資料攤平為形狀或趨勢線;只要在單一瀏覽器分頁中，就能透過一份小型逗號分隔資料集產生表格圖表，方法是使用表格圖表產生器。這個工具接受一份嚴格的 CSV，內容是一列標頭列，後面接著一至五十列資料列;它會透過狀態機解析帶引號的欄位、內嵌的逗號和雙引號，接著同時輸出可供檢視的即時 HTML 表格，以及可供發佈的下載用 SVG 影像。整個流程都在瀏覽器中於本機執行，因此標籤、數值、註記、名稱和產生的圖樣絕不會傳送到伺服器。這讓這個工作流程特別適合計分板、排程、功能比較、小型目錄、價目表、活動摘要，以及精確文字比繪製勢更重要的研究快照。

在貼上資料之前先了解解析器的運作方式，可以省下一輪來回修正。帶引號的欄位必須以引號開頭，只有在引號結尾之後才能接逗號或換行，而格式錯誤的輸入會被直接拒絕、不會嘗試猜測，因此像 Ada, A. 這樣的儲存格，只要用雙引號包起來，就會留在同一欄;儲存格內的字面引號則是透過將引號加倍來跳脫。掌握這些規則後，本文接下來會逐步說明如何準備 CSV、如何使用表格圖表產生器產生表格圖表、如何比對預覽與來源、如何下載 SVG，以及如何為這項工作選擇合適的視覺格式。

表格圖表的用途

當讀者需要查詢某一個特定數值，而不是一眼比較大小時，表格圖表就是正確的選擇。排程、比較清單、目錄、功能細項和價目表都有這個共同特性:使用者想看到的是具體的數字與標籤本身，而不是簡化的趨勢或單一比例。表格圖表產生器會在預覽中將解析後的數值渲染為真正的 HTML 表格，讓標頭與儲存格保持可選取且結構上具有意義，並輸出一個獨立的 SVG，讓其他應用程式把它當作單一可縮放圖形處理，藉此維持這個原始意圖。

當讀者的問題是「有多大」、「佔多少比例」或「在什麼時間範圍內」時，表格圖表就不是合適的選擇。當目標是數值比較時，長條圖或圓餅圖能更快傳達大小;而當任務有明確的開始與結束日期時，甘特圖是更好的呈現方式。表格圖表產生器刻意不提供公式、排序控制、合併儲存格、篩選、樞紐操作、自動型別推斷、藏欄或自動加總，因為每一個數值都會保留為字面文字。正是這個取捨，讓 SVG 檔案維持輕量、解析器保持可預期，輸出結果在發佈時值得信賴。

貼上之前先準備好 CSV

解析器的嚴格是刻意的，因此一份乾淨的來源檔案，是取得乾淨影像最可靠的方式。首先，將你手邊的任何格式轉換為以逗號分隔的 UTF-8 純文字;這個工具刻意不讀取 Markdown 表格、貼上的 HTML、XLSX 活頁簿、Google 試算表連結、遠端 URL、JSON 物件、分號分隔的地區型 CSV，或是任何需要猜測的分隔符號。一旦檔案是純粹的逗號分隔文字，請依循下列幾條直接取自解析器行為的規則。

第一筆記錄提供欄位標題，每個標題都必須含有文字。標頭列恰好只有一列，不是零列，也不是多列。
之後每一列的儲存格數，必須與標頭列完全相同。缺少欄位、多出的逗號或合併的值，會導致輸入被拒絕，而不是被默默猜測。
任何含有逗號或換行的儲存格，都必須用雙引號包起來，而在該帶引號儲存格內，任何字面雙引號都必須寫成兩個。
可以使用 CRLF 或 LF 換行;解析器兩者皆接受。帶引號的欄位在需要時可以跨多行。
每個儲存格請控制在 120 個 Unicode 字元以內;CSV 總長度請控制在 20,000 個 JavaScript 字元以內;欄數請維持在二到十之間;資料列數請維持在一到五十之間。

一個實用的習慣，是把來源 CSV 當作唯一可編輯的權威紀錄。匯出的 SVG 只是當下解析後數值的一個快照，並不會反向連結回原始資料。如果之後需要修改表格，請直接編輯 CSV 並重新產生，而不是去編輯影像。

使用表格圖表產生器建立表格圖表

在全新的瀏覽器分頁中開啟表格圖表產生器。頁面會在同一個畫面中同時呈現 CSV 輸入區、預覽窗格和下載控制項，讓你可以直接比對來源與輸出，不必切換畫面。
貼上一份逗號分隔的資料集，內容以一列標頭列開頭，含有二到十欄文字，後接一到五十列資料列。任何含有逗號或換行的儲存格都必須加上引號;帶引號欄位內的任何字面引號都必須寫成兩個。
選擇 產生表格圖表。頁面會以狀態機解析 CSV，支援 RFC 風格的逗號分隔、CRLF 與 LF 換行、帶引號的欄位、引號內含的內嵌逗號，以及雙引號跳脫;像 Ada, A. 這樣的欄位會保持在同一欄，而像 Said ""hello""" 這樣的引號序列會被還原為 Said "hello"。
逐列比對解析後的 HTML 預與來源資料。預覽採用真正的 HTML 表格元素，因此標頭與儲存格保持可選取，相較於攤平後的影像，更容易看出欄位是否位移或數值是否截斷。
下載已跳脫的 SVG，並以最終顯示尺寸開啟它。欄寬會依據每一欄中最長的顯示值進行估算，並套用最小與最大度;標頭儲存格會有獨特的背景，資料列以交替底色提升視覺追蹤效果。插入 SVG 中的每個字串都經過 XML 跳脫，無效的 XML 控制字元會在檔案儲存前被取代。

下載的檔案是一個獨立的 SVG，包含明確的寬度、高度、viewBox、image role 和可存取標籤，以常見系統風格的 Arial 字型繪製，並使用固定色彩。它可以在瀏覽器、簡報編輯器、設計應用程式，或任何支援 SVG 的向量文件工作流程中開啟。內容不會被上傳，分頁關閉後也不會留下任何紀錄。

比對 HTML 預覽與你的來源

HTML 預覽是真正發揮作用的檢查介面。由於它使用 React 文位元組點建立，絕不會把產生的 SVG 注入到文件中，因此每一個儲存格都是真正的文字，而不是路徑或字符;你可以複製其中的數值、在表格內搜尋，並確認像 Said "hello" 這種含有大量引號的儲存格是否如你所預期地被解析。在繼續之前，請交叉檢查三件事。

顯示的列數與欄數與來源相符。第一筆記錄提供欄位標題，之後每一列的儲存格數必須完全相同。
完整的儲存格內容與你輸入的一致。預覽會保留每個儲存格最多 120 個字元的內容;而 SVG 為了讓欄寬受到控制，每個數值只會顯示前 30 個 Unicode 字元。
含有看起來像標記之字元的儲存格，會以可見文字呈現，而不會被當作作用中的標籤。解析器不會解讀 Markdown、HTML 或 JavaScript，而每個 SVG 字串在寫入檔案之前都會經過 XML 跳脫。

如果解析器拒絕輸入，請修正 CSV，而不是去動預覽。格式錯誤的輸入會被拒絕，而不是被猜測，因此頁面會顯示錯誤訊息，而不是產出一份悄悄錯位的表格。

發佈前下載並驗證 SVG

下載的 SVG 是一個獨立檔案，雖然方便，但也意味著視覺品質的責任會落到你身上。請以檔案最終要呈現的尺寸開啟它，並逐項檢查下列簡短的發佈前清單。

以最終顯示尺寸檢查過長或過寬的儲存格。影像標籤在超過 30 個 Unicode 字元後會被縮寫，以維持欄位可讀性，因此需要完整文字的標籤，可能必須回頭到來源 CSV 中改寫。
檢查拼字、列對齊，以及資料列交替底色的視覺節奏。標頭使用獨特的背景，但色彩對比與整體層級感仍取決於所在頁面。
確認目的地支援 SVG。瀏覽器、簡報編輯器、設計應用程式和向量文件工作流程通常都支援，但印刷流程與部分舊式工具可能不支援。若目的地無法讀取 SVG，請預先轉檔。
將原始 CSV 與影像一併保存。這個影像並不會保留所有試算表功能，也無法保證印刷可達性;來源檔案才是唯一可編輯的權威紀錄。

在表格圖表與其他視覺格式之間擇一

不同的工作適合不同的形狀，而表格圖表對於自己適合的位置誠實以告。下列摘要將常見的讀者問題對應到能最快回答的格式，所列情境皆是這個工具設計支援的使用案例。

讀者的問題	最適合的格式	原因
第 3 列第 2 欄的確切數值是什麼?	表格圖表	每個標籤與數字都以文字形式保持可讀，並可在預覽中選取。
哪一個類別最大?	長條圖或圓餅圖	大小與比例透過長條長度或扇形角度讀取，比從一格格數字中掃描更快。
某個指標隨時間如何變化?	折線圖	繪製出來的線條能直接顯示趨勢方向，不需要讀者依序掃描儲存格。
哪些事項橫跨週一到週五?	甘特圖	具有明確起訖日期的任務，在時間軸上安排比放在表格中比較更清楚。
每個組別中有哪些人?	表格圖表或目錄	名冊式的查閱能讓每個姓名與屬性同時可見。

同一份 CSV 經常可以餵給不只一種格式。只要精確文字比製趨勢更重要，表格圖表產生器就是正確的起點;它是有意與長條圖、圓餅圖、折線圖與甘特圖工作流程互補，而不是要取代它們。

如果你正在權衡選項，《在 Google 試算表中製作長條圖:兩種做法》對此有詳細說明。

如果你正在權衡選項，《免寫程式在 matplotlib 中製作長條圖》對此有詳細說明。