本系列第 11 篇|這篇回答:怎麼讓圖表照實呈現資料,而不是誤導看圖的人? 讀完這篇,你應該能:
- 依比較、趨勢、分佈、關係、組成這五種溝通目的選擇圖表,並說明資料筆數本身不能決定圖型。
- 指出截斷長條圖基準線、該用對數卻用線性、以及把中心點數值畫成單向色尺時,讀者會被圖形誤導。
- 用資料墨水比、資料密度與說謊因子判斷一張圖或一面儀表板有沒有把空間花在資料上。
一、圖表是把數字變成視覺編碼
同一基準的位置與長度最準,圖型由判斷目的決定。
詳細說明
圖表把數字編成眼睛能比較的形狀。同一組數字可以變成長度、角度、面積或顏色深淺,但人眼的準度並不相同。比較同一基準線上的位置與長度最準,比較面積、角度、顏色深淺較不準。長條圖用的是長度,圓餅圖用的是角度與面積,所以要分出類別誰大誰小,長條圖比圓餅圖容易讀準。
選圖時先問這張圖要支援哪一種判斷。常見目的有五種:比較類別的大小、看數值隨時間的趨勢、看數值的分佈、看變數之間的關係、看全體如何組成。目的決定圖型,不是資料筆數決定圖型。12 個類別與 20 個變數會影響圖好不好讀,卻不能代替「這張圖要回答什麼」。
二、依目的選圖,並守住刻度、顏色與墨水
目的對上的圖
比較用長條,趨勢用折線,分佈用直方或盒鬚,關係用散佈,組成用堆疊。
詳細說明
比較類別大小用長條圖。類別多的時候改成水平長條,並依數值排序,眼睛才能沿著同一條基準線往下掃。
隨時間變化的趨勢用折線圖。例如要看模型推論延遲如何隨時間移動、P99 有沒有越過服務水準協議(SLA)。P99 是延遲由小到大排列後落在第 99 百分位的那個值。折線保住時間順序,一條水平參考線則把門檻畫成固定高度。
分佈可以先用直方圖:把連續數值分箱,看每箱有多少筆。多組分佈放在一起比,用盒鬚圖。還要看出各組形狀的差異,用小提琴圖。
兩個變數的關係用散佈圖,一個點是一筆觀測。若要再帶一個變數,可以用點的大小,成為泡泡圖,或用顏色區分。
組成用堆疊長條圖,部分堆起來就是全體,不同組之間也能對照內部結構。圓餅圖只適合類別很少、而且比例差異明顯的時候。類別一多,扇形角度就很難比。
多個變數兩兩之間的相關,用相關矩陣熱圖(heatmap),一格對應一個相關係數。數值沿著地理區域高低分佈,用面量圖(choropleth),以區域的顏色表示。
刻度與顏色
長條從 0 量起,跨數量級改用對數並標明;顏色跟著數值結構選。
詳細說明
長條圖的數值軸必須從 0 開始。長條用長度表示數值,長度要從共同的零點量起。基準線若被截斷,較短的那根會失去大部分長度,剩下的可見長度把差異放大。折線圖看的是變化趨勢,數值軸不一定要從 0 開始。波動只發生在一個狹窄區間時,把縱軸拉近那個區間,走向才看得清楚。
資料跨越好幾個數量級時使用對數刻度。例如數值從 10 到 100 萬,線性軸會把小值擠在底部;對數刻度讓小值與大值都看得見。對數刻度的盒鬚圖是這種情況的一種做法。軸上必須標明使用對數,否則相等的畫面間距會被讀成相等的差值。
顏色要跟著數值的結構走。沒有正負之分的連續數值,用循序色(sequential),由淺到深。有中心點的數值,例如相關係數從 −1 到 1、成長率有正有負,用發散色(diverging),以 0 為中心向兩側分開。類別之間沒有順序,用定性色(qualitative)。避免只靠紅與綠來區分,色覺差異者難以分辨這兩色。
資料墨水比與資料密度
資料墨水比要提高,資料密度要增加,說謊因子理想為 1。
詳細說明
Tufte 用三個量檢查圖有沒有把墨水花在資料上。
資料墨水比(data-ink ratio)等於 用來呈現資料的墨水 / 全部墨水,應盡量提高。不帶資訊的裝飾稱為圖表垃圾(chartjunk),包括 3D 效果、厚重格線、背景圖。它們佔掉墨水,卻不增加能讀到的數值。
資料密度是在有限空間裡放進更多有意義的資料。小型多圖(small multiples)用同一種小圖並排多個序列;走勢小圖(sparkline)在接近一行字的高度裡留下趨勢。兩種做法都是把可比較的資料收進同一視線範圍。
說謊因子(lie factor)等於 圖上效果大小 / 資料中效果大小,理想為 1。圖上的落差比資料裡的落差大,這個比值就大於 1。長條圖截斷基準線,就是在拉高它。
儀表板與程式對照
儀表板把關鍵績效指標放上方,同一指標用一致的顏色。
詳細說明
儀表板把多個指標收成同一個畫面。重點的關鍵績效指標(KPI)放在上方,相同指標用一致的顏色,並提供篩選互動,以便從總覽進入某一段時間或某一個群組。即時監控常用 Grafana。商業報表常用 Tableau、Power BI、Looker Studio。以 Python 作圖時,matplotlib 負責繪圖底層,seaborn 用來畫統計圖,Plotly 用來做可互動的圖。
下面這段對照延遲監控與相關矩陣。df 需要有 time 與 latency_ms 兩欄,300 是這個例子裡的 SLA(毫秒)。相關係數矩陣 corr 用兩側分開的色盤,並把顏色中心設在 0。延遲若跨很多數量級,再把該軸改成對數;若只想看狹窄區間裡的起伏,就不加對數。
import matplotlib.pyplot as plt
import seaborn as sns
ax = sns.lineplot(data=df, x='time', y='latency_ms')
ax.axhline(300, linestyle='--')
ax.set_yscale('log')
sns.heatmap(corr, cmap='coolwarm', center=0)
三、容易混淆的地方
這幾組圖與色尺的名字接近,差在編碼對象與比較基準。實務上資料變數的類型,通常足以決定該選哪一種。
| 容易混淆 | 差別在哪 | 實際遇到時的線索 |
|---|---|---|
| 長條圖 vs 直方圖 | 長條圖的軸是類別,柱與柱分開,用來比大小;直方圖把連續數值分箱,用來看分佈 | 儀表板軸上是管道、產品或城市名稱時用長條圖;軸上是延遲或金額區間時用直方圖 |
| 循序色 vs 發散色 | 循序色由淺到深,表示單向大小;發散色以 0 為中心,向兩側分開 | 圖表要呈現營收或次數的單向大小時用循序色;相關係數或有正負的成長率用發散色,中心放在 0 |
| 長條圖截斷基準線 vs 折線圖不從 0 | 長條用長度,數值軸從 0 起;折線看趨勢,數值軸可以不從 0 | 圖表的長條 Y 軸從 3.0% 這類非零點開始會誇大差異;折線圖拉近波動區間則可以成立 |
| 圓餅圖 vs 長條圖 | 圓餅用角度與面積,只適合少數類別且比例差明顯;類別多或要精比大小時,用排序後的長條 | 產品分析要比較 12 個類別的佔比時,依數值排序的水平長條圖較容易比較 |
| 熱圖 vs 散佈圖 | 熱圖一格是一個彙總值,適合相關矩陣;散佈圖一個點是一筆觀測,看兩個變數的關係 | 儀表板要呈現 20 個特徵的 Pearson 相關矩陣時用熱圖加發散色;要看每筆資料兩個變數的關係時用散佈圖 |
四、基礎練習
第 1 題
某客服平台上線了回覆模型。值班人員要看推論延遲隨時間的連續變化,並判斷 P99 有沒有越過 SLA。哪一種圖適合這個監控目的?
- (A) 用圓餅圖把各時間點的延遲畫成扇形,看哪一段的佔比最高
- (B) 每一分鐘畫一根長條,不依時間或數值排序,直接並排
- (C) 用折線圖畫延遲隨時間的變化,並加一條 SLA 參考線
- (D) 用文字雲把延遲數字鋪在畫面上
看答案與解析
答案:C
折線保住時間順序,SLA 參考線把門檻畫成固定高度,P99 一越過那條線就能看出違規。
- (A) 圓餅圖編碼的是組成。時間被切成扇形後順序消失,也放不進一條跨時段的門檻。
- (B) 每一分鐘一根長條且不排序,是把時間當成可以對調的類別,連續變化讀不出來。
- (D) 文字雲編碼的是詞語出現的多寡,不是延遲數值,也沒有參考線。
第 2 題
某電商三個廣告管道的轉換率是 3.2%、3.8%、4.0%。報告用長條圖,Y 軸從 3.0% 畫起。這個設計的問題是什麼?
- (A) 沒有問題。截斷之後差異更精確,所以是好設計
- (B) 沒有問題。長條圖的數值軸本來就不必從 0 開始
- (C) 它只改變柱子的顏色,不影響讀者對長度的解讀
- (D) 基準線被截斷,可見長度誇大了差異,4.0% 看起來會是 3.2% 的好幾倍
看答案與解析
答案:D
長條的長度要從 0 量起。軸從 3.0% 起時,3.2% 的可見長度是 3.2 − 3.0 = 0.2 個百分點,4.0% 的可見長度是 4.0 − 3.0 = 1.0 個百分點。可見長度比 = 1.0 / 0.2 = 5。實際數值比 = 4.0 / 3.2 = 1.25。圖上看起來約 5 倍,資料只差約 1.25 倍。圖上呈現的差異遠大於資料裡的差異,說謊因子大於理想值 1。
- (A) 截斷改的是長度比例,不是把讀數變得更準。
- (B) 可以不從 0 開始的是折線圖。長條圖用長度編碼,軸必須從 0。
- (C) 起點改變的是柱長,跟顏色編碼無關。
第 3 題
某工廠的品質模型有 20 個特徵,分析師要顯示這些特徵的 Pearson 相關矩陣。相關係數的範圍是 −1 到 1。哪一種畫法適合?
- (A) 用相關矩陣熱圖,並搭配以 0 為中心的發散色
- (B) 用同一張熱圖,但顏色改成由白到紅的循序色
- (C) 為 20 個特徵各畫一張圓餅圖
- (D) 用 3D 長條圖把相關係數畫成高度
看答案與解析
答案:A
矩陣裡每一格是一個相關係數,熱圖剛好一格對一格。係數以 0 為中心,正負兩側意義相反,所以用發散色,讓 0 落在顏色的中央。
- (B) 白到紅的循序色是單向的淺到深,0 不會成為視覺中心,負相關與正相關不易對照。
- (C) 圓餅圖看的是組成。20 張圓餅對不出「兩兩一個係數」的矩陣。
- (D) 3D 長條圖加上立體裝飾,高度更難沿共同基準比較,也不是矩陣的編碼。
第 4 題
某連鎖零售要比較各城市門市的營收分佈。城市之間的營收從 5 萬到 5,000 萬不等。哪一種做法適合?
- (A) 單位都是元,維持線性刻度即可
- (B) 使用對數刻度(例如對數刻度的盒鬚圖),並在軸上標明是對數
- (C) 刪掉營收特別高的大城市,其餘城市再用線性刻度
- (D) 改畫圓餅圖,看各城市佔全體營收的比例
看答案與解析
答案:B
5,000 萬 / 5 萬 = 1,000,兩端相差一千倍,已經跨越好幾個數量級。對數刻度讓低營收與高營收的分佈同時看得清楚;多組分佈可以用盒鬚圖。軸上要標明這是對數。
- (A) 單位相同不會取消數量級差距。線性刻度下,靠近 5 萬的差異會被 5,000 萬的尺度壓扁。
- (C) 刪掉大城市等於丟掉分佈的上端,畫出來的不再是原來的分佈。
- (D) 圓餅圖回答的是組成佔比,不是營收落在哪些區間、中心與離散如何。
第 5 題
某工廠要把多條產線的指標放進同一面監控畫面,並希望設計符合 Tufte 的資料密度與資料墨水比。哪一種做法符合?
- (A) 每個指標各做一張很大的 3D 圖
- (B) 用小型多圖或走勢小圖,在有限空間呈現多個指標,並移除 3D 與裝飾
- (C) 加上背景圖片,增加畫面的質感
- (D) 每一頁只放一個數字,避免同時出現太多資訊
看答案與解析
答案:B
小型多圖與走勢小圖用同一套編碼並排多個指標,有限空間裡的有意義資料變多。移除 3D 與裝飾,則把墨水留給資料,資料墨水比提高。
- (A) 每張大 3D 圖把墨水花在立體效果上,同一畫面能放進的指標也變少。
- (C) 背景圖不帶資料,資料墨水比下降。
- (D) 一頁只留一個數字,比較與趨勢都沒有,資料密度過低。
第 6 題
某電商有 12 個產品類別,要呈現各類營收佔比,並讓人比較誰高誰低。哪一種選擇最容易比準?
- (A) 圓餅圖最適合任何佔比,本題也應使用圓餅圖
- (B) 用散佈圖,每個類別一個點
- (C) 用依數值排序的水平長條圖,它比圓餅圖容易比較
- (D) 用雷達圖把 12 個類別圍成一圈
看答案與解析
答案:C
12 個類別要沿同一條基準線比長度。依數值排序的水平長條圖做得到。圓餅圖用角度與面積,類別一多就難比。
- (A) 圓餅圖只適合類別很少、比例差異明顯的時候,不是任何佔比都適用。
- (B) 散佈圖需要兩個數值變數。這裡只有類別與一個佔比,沒有第二個數值軸。
- (D) 雷達圖沒有共同的直線基準,無法把 12 個類別依長度排序比較。
五、重點回顧
- 選圖先定目的:比較用長條圖,趨勢用折線圖,分佈用直方圖、多組用盒鬚圖、要看形狀用小提琴圖,兩變數關係用散佈圖,組成用堆疊長條圖。
- 人眼最準的是同一基準線上的位置與長度。類別多的時候,依數值排序的水平長條圖比圓餅圖容易比大小;圓餅圖只留給類別很少、比例差異明顯的情況。
- 長條圖的數值軸從 0 開始,因為長度從零點量起。折線圖看的是趨勢,數值軸可以不從 0。截斷長條圖的基準線會讓可見長度比大於實際數值比。
- 數值跨越好幾個數量級時用對數刻度,並在軸上標明。單向連續值用循序色,以 0 為中心的數值用發散色,類別用定性色,並避免只靠紅綠區分。
- 資料墨水比等於用來呈現資料的墨水除以全部墨水,應去掉 3D、厚重格線、背景圖這類圖表垃圾。資料密度靠小型多圖與走勢小圖,在有限空間放進更多有意義的資料。說謊因子理想為 1。
- 儀表板把重點 KPI 放在上方,相同指標用一致顏色,並提供篩選互動。即時監控常用 Grafana,商業報表常用 Tableau、Power BI、Looker Studio;Python 側可對照 seaborn 的折線、對數軸與以 0 為中心的熱圖。