圓餅圖的陷阱和替代圖表:
教你如何正確製作圓餅圖
-
圖表設計
-
283
- 發佈於 2025-01-17
- 更新於 2025-01-17
2
<h1> </h1><div class="raw-html-embed"><div class="row d-flex justify-content-center align-items-center mt-3 mb-4">
<div class="col-10 catalog">
<div class="text-center" style="color:#f1f3f4;background:#393939;">目錄</div>
<div id="catalog_content">
<a href="#heading1">特徵</a><br>
<a href="#heading2">適用情境</a><br>
<a href="#heading3">適用樣式</a><br>
<a href="#heading4">不適用情境與建議圖表</a><br>
<a href="#heading41" class="ms-3">1.項目</a> : 項目個數太多、項目順序有特殊意義<br>
<a href="#heading42" class="ms-3">2.比較變化</a>:項目個數太多、項目順序有特殊意義<br>
<a href="#heading43" class="ms-3">3.並列圓餅圖</a> : 並列圓餅圖意義不同、並列圓餅圖太佔空間<br>
<a href="#heading5">參考書籍</a>
</div>
</div>
</div></div><p>圓餅圖(Pie Chart)作為基本圖表被許多人熟知,但卻常常遭人誤用,導致近年來許多顧問公司與調查機構紛紛禁止員工使用圓餅圖。因此本文想帶大家來了解,圓餅圖的正確與錯誤的使用情境,並提供建議圖表取代圓餅圖以更正確有效地傳達資訊。</p><div class="raw-html-embed"><h3 id="heading1">特徵</h3></div><p>將一個圓形圖形切割成多個區塊,暗示每個區塊組合起來等於整個圓形。區塊的正確名稱為扇形(sector),雖然有人稱之為楔形(wedges)、弓形(segment)或切片(cut)。</p><p> </p><div class="raw-html-embed"><h3 id="heading2">適用情境</h3></div><ul><li><strong>只傳達比例</strong>:圓餅圖只適合用來表達百分比,亦即各扇形占整體的比例,因此基本上不需提供數值,避免模糊焦點。</li><li><strong>項目個數少</strong>:最多呈現5個項目,若項目個數太多,導致許多扇形占比過小難以辨識,不妨將其納入「其他項」,並使用堆疊長條圖呈現「其他項」中的細項,如此一來既能傳達正確資訊,也能顧及畫面美感與辨識度。</li><li><strong>項目順序無意義</strong>:通常圓餅圖各扇形的排列順序會由面積大至小排列,但若項目順序有特殊意義,例如四季,如果按照扇形面積大小排序會打亂四季順序,導致觀看者難以直覺地理解,此種情況下較適合使用百分比堆疊長條圖。</li><li><strong>強調簡單的比例</strong>:簡單的比例指1/2、1/3或1/4等人眼容易辨識的比例。若圓餅圖在視覺上呈現簡單比例時,容易讓人印象深刻加深記憶力。</li></ul><p> </p><div class="raw-html-embed"><h3 id="heading3">適用樣式</h3></div><ul><li><strong>項目依比例大小順時針排列</strong>:一般人在觀看圓餅圖時,視線移動的方式跟看時鐘一樣,即從12點開始順時針閱讀。因此在安排項目順序時,將比例最大的項目置於開頭,讓人一眼就了解比例最大的項目是什麼,接著順時針地依照比例大小排列各個項目,符合一般人閱讀習慣,有助於提高理解力。</li><li><strong>不使用多種顏色</strong>:因為圓餅圖由多個扇形組成,許多人會下意識地選擇用不同顏色呈現不同項目,但此舉容易造成畫面凌亂毫無重點。此時可以選擇單一色彩並用漸層色塗抹各扇形,或是只在想重點強調的扇形使用顏色,其餘地方使用灰色,突出重點。</li><li><strong>不使用3D立體圖</strong>:立體圖會讓圓形變橢圓形,放大最下面那塊扇形的面積,容易讓人錯判比例高低。</li></ul><p> </p><div class="raw-html-embed"><h3 id="heading4">不適用情境與建議圖表</h3></div><div class="raw-html-embed"><h4 id="heading41">1.項目</h4></div><p><strong>1-1.項目個數太多</strong></p><p>當項目個數太多時,使用圓餅圖容易導致許多低占比的項目擠在一起,降低辨識度,還會造成讀者分心。因此建議<strong>將低占比項目組成「其他項」,並用堆疊長條圖呈現其他項中的細項</strong>。如此一來讀者就可以把焦點放在主要項目中,而不會先被擠成一團的項目奪去注意力造成分心,讀者可以更快速地理解圖表主要想傳達的訊息。</p><p>需要注意的是,有些製作者可能會特意地移除其他項,此舉會造成各個項目的比例虛增,因此若原始資料中有其他項,圖表中卻沒有,那麼讀者需要注意圖表訊息可能有誤。</p><figure class="image"><img src="/imagefiles/pie-chart-design-trap-1.JPG"></figure><figure class="image"><img src="/imagefiles/pie-chart-design-trap-2.JPG"></figure><p><strong>1-2.項目順序有特殊意義</strong></p><p>圓餅圖適合以扇形面積大小排列,將面積最大的扇形放在第一眼就看得到的位置,即12點位置。若項目順序有特殊意義時,用面積決定順序的方法將會打亂特殊排序,讀者很難在腦中修正順序,無法直覺地理解圖表。此時可以<strong>使用百分比堆疊長條圖,順著人眼視線垂直或水平地排列,讓讀者的視線不需在不同扇形標籤中來回移動</strong>,加速理解力。</p><figure class="image"><img src="/imagefiles/pie-chart-design-trap-3.JPG"></figure><div class="raw-html-embed"><h4 id="heading42">2.比較變化</h4></div><p><strong>2-1.比較各扇形比例的變化</strong></p><p>因為人類難以衡量圓餅圖扇形面積的大小與圓心角角度,因此圓餅圖是最不適合用來「比較」的圖表。若想比較各項目比例的變化,<strong>建議採用百分比堆疊長條圖,其除了適合用來比較面積大小外,本身還帶有順序的意義,因此不須另外添加箭頭圖形表示變化</strong>。</p><figure class="image"><img src="/imagefiles/pie-chart-design-trap-4.JPG"></figure><figure class="image"><img src="/imagefiles/pie-chart-design-trap-5.JPG"></figure><p><strong>2-2.比較整體變化</strong></p><p>圓餅圖除了難以比較扇形面積,也很難用於比較整個圓餅圖的面積,我們無法正確衡量圓餅圖面積的數值,只能大略觀察到變大或是變小。若要表現整個圓餅圖面積的變化,<strong>可以使用堆疊長條圖,如同前述的百分比堆疊長條圖,其適用於比較面積且自身帶有順序的意義,無需箭頭符號代表變化</strong>。差別只在於用數值代表整體面積,而用百分比代表比例。</p><figure class="image"><img src="/imagefiles/pie-chart-design-trap-6.JPG"></figure><div class="raw-html-embed"><h4 id="heading43">3.並列圓餅圖</h4></div><p><strong>3-1.並列圓餅圖意義不同</strong></p><p>當兩個並列圓餅圖的意義不一樣,例如如下圖般,右側圓餅圖代表左側圓餅圖其中一個項目的細項,此時將圓餅圖並列會導致讀者直覺地認為這兩個圓餅圖的意義是相同的,不利理解。在並列圓餅圖意義不一致的情況下,<strong>可錯開圖表類型,暗示讀者並非平行關係。此例中適合用橫條圖呈比較實際數值,並將顏色設定為左側圓餅圖中對應項目的顏色,暗示讀者兩者的關係。</strong></p><figure class="image"><img src="/imagefiles/pie-chart-design-trap-7.JPG"></figure><figure class="image"><img src="/imagefiles/pie-chart-design-trap-8.JPG"></figure><p><strong>3-2.並列圓餅圖太佔空間</strong></p><p>將相同意義的圓餅圖並列,才能有效地暗示讀者兩者為平行關係。但有時兩個圓餅圖佔據的空間過大,導致百分比標籤或資訊過小不易閱讀,此時就可以<strong>將相同意義的圓餅圖用甜甜圈圖呈現,不僅有效降低空間使用,視線也不用在圓餅圖間來回游移,畫面看起來也更美觀</strong>。</p><p>下圖的例子中,並列圓餅圖用來展示銷量比例的變化。如同前面討論「比較各扇形比例的變化」的例子一樣,我們提到可使用百分比堆疊長條圖替換圓餅圖,在這裡我們<strong>使用斜線圖來呈現比例的劇烈變化,可造成更大的衝擊力</strong>。</p><figure class="image"><img src="/imagefiles/pie-chart-design-trap-9.JPG"></figure><figure class="image"><img src="/imagefiles/pie-chart-design-trap-10.JPG"></figure><figure class="image"><img src="/imagefiles/pie-chart-design-trap-11.JPG"></figure><p> </p><div class="raw-html-embed"><h3 id="heading5">參考書籍</h3>
</div><p><a href="https://www.eslite.com/product/1001122731227833">瓊斯(2005)。<i>別讓統計圖表唬弄你</i>。臺北市:遠見天下文化。</a></p><p><a href="https://www.eslite.com/product/1001247312584116">清水久三子(2017)。<i>IBM首席顧問最受歡迎的圖表簡報術: 掌握69招視覺化溝通技巧, 提案、企畫、簡報一次過關!</i>臺北市:商業周刊。</a></p><p><a href="https://www.eslite.com/product/1001113882120055">菅野誠二(2012)。<i>商業簡報聖經PowerPoint</i>。臺北市:旗標科技。</a></p>