圓餅圖製作工具的範例是一組帶有標籤的小型資料集 — 例如 Chrome 63、Safari 20、Firefox 12、Edge 4、Other 1 — 並搭配這些數字所產生的圖表，其中每個切片的百分比是以數值 ÷ 總和 × 100 計算而成。多數搜尋範例的讀者想一次取得兩樣東西：一組可以複製的具體資料集，以及一張能清楚看出完成圖表樣貌的圖片。上方的五個數字合計為 100，所以 Chrome 的切片是 63%、Safari 是 20%、Firefox 是 12%、Edge 是 4%、Other 是 1%。這種整齊的對齊並非巧合 — 當原始數字剛好加總為 100 時，百分比就會一對一地對應數值。在真實的預算或問卷中，數字很少會加總為 100，這就是為什麼一個好的圓餅圖製作工具會替你計算比例，而不是要求你自己做算術。基於瀏覽器的 圓餅圖製作工具接受任何非負數的清單，自動計算百分比，並渲染出一張帶有圖例的彩色圖表，圖例會顯示標籤、原始數值與占比。由於所有繪圖動作都在你自己分頁內的 HTML canvas 上完成，因此你的資料從不離開裝置，這讓你可以放心貼上不想上傳的數字。
圓餅圖製作工具範例展示了什麼
圓餅圖製作工具範例分為兩半:輸入與輸出。輸入是一份簡短的配對清單，每行以「標籤，數值」的格式書寫。輸出則是一張圓形圖表，每個切片依其占總和的比例決定大小，從內建調色盤取得顏色，並在圖例中與原始數字及百分比並列。一旦看過一次這種格式的運作方式，幾乎任何其他資料集的處理方式也都相同。
| 標籤 | 數值 |
|---|---|
| Chrome | 63 |
| Safari | 20 |
| Firefox | 12 |
| Edge | 4 |
| Other | 1 |
總和為 63 + 20 + 12 + 4 + 1 = 100。每個切片的百分比以數值 ÷ 總和 × 100 計算，所以 Chrome 是 63 ÷ 100 × 100 = 63.0%,Safari 是 20 ÷ 100 × 100 = 20.0%,Firefox 是 12.0%,Edge 是 4.0%,Other 是 1.0%。這五個切片恰好加總為 100.0%，而圖例會在每個標籤旁顯示這些數字。這道算術題是本文中每個圓餅圖製作工具範例背後唯一詳細計算的過程;其餘資料集僅以質性方式描述，實際運算交由工具完成。
三組可立即貼上的真實圓餅圖製作工具範例
學會這種格式的最快方式就是貼上真實資料。以下是三組小型資料集，涵蓋了人們最常使用圓餅圖的場景。每一組都使用工具所期望的「標籤，數值」精確格式撰寫。
範例 1 — 瀏覽器市占率(加總為 100)。
- Chrome, 63
- Safari, 20
- Firefox, 12
- Edge, 4
- Other, 1
範例 2 — 以美元計算的每月預算(加總約為 3,600)。
- Rent, 1500
- Groceries, 600
- Transport, 300
- Entertainment, 200
- Savings, 800
- Other, 200
範例 3 — 以小時計算的 24 小時一天(加總為 24)。
- Sleep, 8
- Work, 8
- Meals, 2
- Commute, 1
- Exercise, 1
- Free time, 4
在預算範例中，最大的切片是 Rent，約占總和的 42%(約 1,500 ÷ 3,600)，而 Entertainment 與 Other 同為最小，各約 6%。在一天的範例中，Sleep 與 Work 同樣各占圖表的三分之一，其餘四個類別則平分剩下的三分之一。與其手動計算這些總和，工具會直接從你貼上的數字讀取總和，並為每個切片標示其占比。若想更聚焦地了解如何將預算明細轉為圖表，以 3 步驟為預算製作圓餅圖這份指南以更精簡的形式涵蓋了同樣的概念。
如何從你的資料製作圓餅圖
整個工作流程只需三個動作，而且可以在你已開啟的瀏覽器分頁中完成。
- 開啟圓餅圖製作工具，將標籤與數值貼入資料方塊中，以「標籤，數值」的格式每行列出一組配對。
- 在圖表重新繪製時查看結果。切片依占總和的比例決定大小，使用內建調色盤中的不同顏色，並在圖例中顯示標籤、原始數值與百分比。可在圖表上方加上選填的標題，說明整體所代表的內容。
- 點擊下載，將完成的圖表儲存為帶有白色背景的 PNG 圖片，即可直接放入投影片、文件或聊天訊息中。
不需要註冊、不必安裝軟體，也無需等待伺服器回應。由於圖表是在你自己瀏覽器分頁內的 HTML canvas 上繪製，而 PNG 也是在本機產生，因此在你編輯數字時重繪反應迅速，你的資料從不離開裝置。
讓每個範例都能運作的輸入格式規則
輸入格式刻意設計得寬容，即使從試算表粗略複製也能產生可用的圖表。貼上之前有幾條規則值得了解。
每一行獨立讀取。空行會被忽略，標籤與數字周圍的多餘空白會被去除，因此「 Chrome , 63 」與「Chrome, 63」會被視為相同。數值會從該行最後一個逗號後讀取，這表示即使標籤本身含有逗號 — 「New York, NY, 12」或「R&D, 40」 — 仍能正確解析。數值一側必須是非負數;整數與小數皆可，零值也會被接受並產生一個沒有可見寬度的切片。任何不含有效非負數的行會被略過而非讓圖表出錯，因此從試算表誤貼的標題列不會導致錯誤。
數值不需要是百分比，也不需要加總為任何特定數字。圓餅圖製作工具會將你提供的所有數值加總作為總和，再以各數值除以該總和，因此以美元計算的預算、以小時計算的一天，以及以原始計數呈現的問卷，都能以相同方式處理。關於這些規則及其相關限制的更完整說明，請參考圓餅圖製作工具速查表:格式、技巧與限制，其中彙整了所有邊界條件。
圓餅圖何時是正確的選擇
圓餅圖是呈現整體如何拆分為部分的多種方式之一。下表將它與其他三種常見圖表類型進行比較，協助你為資料挑選合適的圖表。
| 圖表類型 | 最適用於 | 優勢 | 注意事項 |
|---|---|---|---|
| 圓餅圖 | 單一整體的組成部分 | 一眼即可看出占總和的比例 | 切片過多或大小相近時不易閱讀 |
| 長條圖 | 類別排名或精確數值比較 | 易於並列比較精確長度 | 當總和本身最為重要時不夠直觀 |
| 折線圖 | 隨時間變化的趨勢或有序的 x 軸 | 使方向與變化速率一目了然 | 用於無序類別時容易誤導 |
| 表格圖 | 讀者會引用的精確數字 | 顯示實際數字且無四捨五入 | 讀者必須自行進行比較 |
對於預算、市占率快照、單日活動或問卷回應集，圓餅圖製作工具範例通常是最合適的起點。對於一年中的每月營收，或五項不相關產品的比較，長條圖讀起來更清楚;而一旦 x 軸代表時間或順序，折線圖會是更好的選擇。上述三組資料集的精確百分比是由工具本身計算，而非手動算出。
讓圓餅圖製作工具範例更清晰的技巧
幾個習慣能將差強人意的圖表化為清晰的圖表。在貼上前，將資料列從大到小排序。切片會依你列出的順序繪製，從頂部開始，因此將最大的類別列在最前面，可將主導切片置於最顯眼的位置，並有助於眼睛依序為其他切片排序。當類別眾多時，可將微小的類別合併為單一「Other」列 — 擁有二十個細窄切片的圓餅圖難以閱讀，而一張包含五個具名切片與一個「Other」分組的簡潔圖表能更快傳達相同的訊息。
保持標籤簡短，讓圖例保持整潔;「Transport」比「Public transport and ride shares」更易於掃讀。利用圖表標題說明整體所代表的內容，例如「How I spend my day」或「Browser market share, September 2026」，因為圖表本身只顯示占比，並不會顯示單位或日期。當圖表看起來滿意時，PNG 下載會保留白色背景與清晰的邊緣，因此該檔案可直接放入簡報、書面報告或聊天訊息中，無需再做任何修飾。