你可以在大約一分鐘內完成一個標有百分比的圓餅圖,只要把一組簡單的標籤和數值清單貼到瀏覽器工具中,再把產生的 PNG 當成置入影像丟進 Adobe Illustrator。對於大多數臨時的圖表工作,Illustrator 那套繁重的流程——打開圓餅圖工具、拉出一塊扇形、在對話框裡選顏色、逐一輸入標籤和數值,再手動加上百分比和圖例——製造了很多麻煩,卻只換來很小的成果。瀏覽器版的圓餅圖產生器採取不同的做法:你用純文字輸入資料,圖表即時重繪,百分比由原始數字自動計算,因此每塊一定加總為 100%。由於輸出是乾淨、白色背景的 PNG,它可以放到任何 Illustrator 圖板上、縮成任何尺寸,在簡報尺寸下依然清晰可讀。當你只需要一張圖表給簡報、模型稿或社群圖片使用、不想花半小時在 Illustrator 的對話框裡調扇形時,這個捷徑就很有用。

為什麼 Adobe Illustrator 的圓餅圖流程比實際需要更沉重
大多數搜尋如何在 Illustrator 中製作圓餅圖的人,通常是想做以下三件事之一:在現有版面中放入一個有標籤的圓餅、製作行銷圖的草稿、或為報告示範一項數據。Illustrator 都能做到,但路徑比專門的圖表應用程式更複雜。內建的圓餅圖工具藏在對話框背後,你要在類似試算表的表格中輸入資料、選擇樣式、然後接受常常需要後續修改的預設值——移動圖例、重新上色、手動加上百分比標籤。當你需要一張有清楚圖例和百分比標籤的圓餅時,你往往得另外再手動建立圖例,因為 Illustrator 不會幫你計算百分比。對於只用一次的單張圓餅來說,這實在是很多步驟只換來一點點成果。
另一條路——用筆狀工具畫扇形、計算每塊的角度(angle = value ÷ total × 360)、再手動標記每塊——給你完全的控制權,但完全是手工作業。當圖表必須以即時向量路徑存在 Illustrator 檔案中時,這是正確的答案。但當你只想要一張在投影片尺寸下清楚可讀的成品圖時,這就是錯誤的答案。
更快的路徑——在瀏覽器中製作圓餅,再置入 Illustrator
對於「我需要一張乾淨的圓餅圖影像,可以丟進 Illustrator」這種常見情況,瀏覽器版的圖表產生器明顯更快。Pie Chart Maker 完全在瀏覽器分頁中執行,接受「標籤, 數值」的清單,並畫出有色彩標示的圓餅,每張圖都包含每次重繪的標籤、原始數值和計算出的百分比。因為數學已經幫你算好,每塊一定加總為 100%,你不必記得哪個角度屬於哪一塊。整個工具是為了快速的一次性圖表而設計:無需安裝、無需註冊,在你按下下載之前都不用存檔。
有兩點讓它對 Illustrator 工作流程特別有用。第一,輸出是白底且邊緣銳利的 PNG——放到任何圖板上當作置入影像,縮放依然清晰。第二,因為圖表是在你自己的瀏覽器分頁中用 HTML canvas 繪製,只使用你輸入的數字,你的資料從不外傳。這對於內部指標、預算細項、問卷結果、或任何你不想上傳到伺服器的數字都很有幫助。
如何使用 Pie Chart Maker 在瀏覽器中製作圓餅圖
- 在瀏覽器中開啟 Pie Chart Maker。圖表區域在你開始輸入之前是空白的,所以第一步是輸入資料。
- 在資料框中,用「標籤, 數值」的格式每行輸入一項——例如三行:「Chrome, 63」、「Safari, 20」、「Firefox, 10」。每一行變成一塊;標籤會出現在圖例中,數值則控制該塊的大小。
- 隨著你的輸入,圓餅圖會即時重繪。每塊顏色來自內建調色盤,圖例會列出標籤、原始數值和根據總和計算的百分比。
- (選擇性)在標題框中加上圖表標題。標題會出現在圖表正上方。
- 當圖表看起來沒問題時,按下「下載」。工具會將一張白底的 PNG 圖片存到你的下載資料夾。
- 在 Illustrator 中選擇「檔案 → 置入」,選取 PNG,然後點擊放到圖板上。依需要調整大小與位置;在任何常見的簡報尺寸下影像都保持清晰。
輸入規則:如何格式化你的標籤和數值
輸入框刻意設計得很寬容,讓你不必預先清理就能從試算表或備註直接貼上。重點只有兩條規則:一行一項、標籤和數值之間用逗號分開。其他都能優雅處理,這表示從試算表粗略貼上的內容,幾乎總能第一次就產生可用的圖表。
| 輸入細節 | Pie Chart Maker 的處理方式 |
|---|---|
| 空白行 | 忽略 |
| 標籤或數字前後有多餘空白 | 自動去除 |
| 標籤中含有逗號(例如 "Acme, Inc.") | 可以處理——數值會從該行最後一個逗號讀取 |
| 該行沒有有效的非負數字 | 略過(不會產生錯誤) |
| 整數或小數值 | 兩者皆可接受 |
| 數值為零 | 可接受;該塊沒有可見寬度 |
兩個實際的例子有幫助。如果你的試算表匯出是「Chrome, 63」/「Safari, 20」/「Firefox, 10」,你可以直接貼上這三行,馬上得到一張三塊的圓餅,各塊分別代表總和的 63/93、20/93、與 10/93——工具會自動為你計算這些百分比。如果你的標籤含有逗號——例如「Q1, 北美」和「Q1, 歐洲」——工具仍能正確解析,因為它從該行最後一個逗號讀取數值,而不是從第一個。這個細節正是「貼上即可用」和「每行都得先編輯」的差別所在。
讓圓餅圖放到 Illustrator 後依然好看的訣竅
- 保持區塊數量少。圓餅圖在超過大約六到七個類別後就難以閱讀;貼上前先把最小的合併成一個「其他」項目。
- 由大到小排列資料列。扇形會依照你列出的順序,從頂端開始繪製,因此由大到小會讓整個圓餅的閱讀動線更流暢。
- 標籤保持簡短。過長的標籤會拉長圖例,也可能出現尷尬的換行;盡量精簡為一兩個詞。
- 用標題說明整個圓餅代表什麼——例如「瀏覽器市佔率, 2024 Q2」——不要單靠圖例來傳達內容。
- 如果你需要特定顏色以符合品牌,請計畫在置入 Illustrator 後重新為扇形上色。PNG 乾淨且容易選取,但顏色已經固化在像素中,並不是可編輯的向量路徑。
- 每次修改後重新下載。如果你在下載之後又調整了數值,存檔的 PNG 就不再符合螢幕上看到的內容,請按一下「下載」重新整理 Illustrator 中的檔案。
什麼時候 Adobe Illustrator 仍然是對的工具
當你想要快速取得一張乾淨的圖片、且之後不需要再編輯圖表的幾何結構時,瀏覽器版的圓餅圖是正確答案。Adobe Illustrator 在少數特定情境下仍是正確答案,值得了解分界點在哪。
| 情境 | 最佳選擇 |
|---|---|
| 給簡報、模型稿、或報告圖片使用的一次性圓餅 | 瀏覽器版 Pie Chart Maker |
| 圓餅需要以可編輯向量路徑存在 .ai 檔案中 | Illustrator 的圓餅圖工具 |
| 不想上傳的機密資料 | 瀏覽器版 Pie Chart Maker(本機執行) |
| 含自訂插圖、爆炸切片或 3D 效果的圓餅 | Illustrator,手動繪製 |
| 快速以視覺方式檢查總和如何拆分 | 瀏覽器版 Pie Chart Maker |
通用規則很簡單。如果你需要一張完成的圓餅圖影像——任何時候都行、任何常見尺寸皆可、要有乾淨的圖例和百分比標籤——瀏覽器工具是最短路徑。如果圓餅必須是即時、可編輯的向量幾何,存在 Illustrator 檔案內部,你仍然需要 Illustrator 自己的工具或手動一塊一塊畫扇形的方式。介於兩者之間的所有情況,使用瀏覽器工具可在極短時間內完成九成的工作。
對大多數閱讀本頁的讀者而言,價值在於省下的時間。輸入標籤和數值、看到圓餅自己畫出來、按下下載、再把 PNG 放到 Illustrator 中。整個循環更接近一分鐘而不是一小時,圖表放到圖板上後依然清晰可讀。
延伸閱讀:將折線圖資料轉換為獨立的 SVG 圖表。
延伸閱讀:如何從 CSV 製作表格圖。