資訊圖表｜利用雷達圖提升數據的競爭與衝突感

2023 年 5 月 14 日

「競爭」彷彿就是商業社會的代名詞。產品的銷量、員工的業績、市佔的比例，每年每月鬥個你死我活。這些具競爭性的數據，大多數會採用長條圖或是圓餅圖來表示，我們來看一下，如何利用雷達圖的視覺衝突感，來加強數據之間的對比。在商業應用以外、獎項與選舉的候選人支持度也是適用的場合呢。

是次的教材來自於端傳媒較早前奧斯卡頒獎禮的系列報道：

在圖中可以看到五個長條從中央擴散開來，營造出互相競爭的視覺效果。可能你會覺得，這樣做很簡單，把五個長條形的形狀，各自旋轉再組合便可以吧？可是形狀朝中央對齊其實不是想像中容易（教材便有出現不整齊的情況），而且，既然有自動化的方法，又何苦要做手工呢？

第1步：擴張數據的範圍

改造由長條圖開始，將「比例」列的數據呈對角線錯開如下：

現在於錯開後的空白位置補上零，秘訣是當數列中只有一個非零值，而其餘的數值都是零的時候，就可迫使雷達圖由繪出網狀，變成繪出一條直線。

第2步：加入預設雷達圖

完成數據的梳理與準備，下一步就是選擇「演員」及「比例」的內容並加入軟件中預設的雷達圖：

你看，毫無難度之下雷達圖已經基本成型了喲！

第3步：修正雷達圖設計

產出了雷達圖的原型，就可以修正設計來加強溝通的效益。

先進行減噪，把軸線上的數字隱藏，因為各個數據點最終會配上很大的標籤，所以軸線上的刻度就相對不重要；再把五條數據線的顏色統一並加粗顯示（可隨個人喜好修改cap/ join type 使其變成圓頭）；

接著是突出訊息，把軸線跨度由5%改為10%，並把軸線的最大值設定值訂為35%，這個組合會使最外圍的網線只得30%，目的就是造就楊紫瓊的支持比例(32.6%) 突出於網線外，視覺上更突出其領先地位。

第4步：加入數據的標籤

最後也是最需要心思的一步就是標籤的處理。當然你可以走懶惰又直接的路線，手動以文字方塊為每個數據線配上標籤，不是錯誤的做法；也可以繼續看下去學習解難技巧，將來遇上其他問題也更容易解決。

看到這裡你可能會想，在之前幾次的資訊圖表改造，學會了應用CHAR(10)來強制標籤的分行，今次的教材也是採用兩行的標籤，可否用同樣的做法呢？

遺憾地是不能夠這樣做。

CHAR(10)沒錯可以帶來兩行的標籤，但是不能分開設定兩行之間各自的字體和大小，共同進退之下，就不能夠做到教材中的上大下小效果。

另一個角度是考慮separator，軟件中數據標籤的設定，可以選擇不同內容之間的separator，當中的new line就可以幫助我們達致兩行標籤，並且可以分開設定字體及大小。

教材中的第一行是數值，第二行是分數，然而在軟件中，數據標籤設定頁，從上而下，Value from cells（可用來顯示分數）是先於Values（用來顯示數值），而且無法改動次序，那麼，難道我們只可以造出第一行是分數，第二行是數值的數據標籤嗎？

也不一定呢。

既然Value from cells是先於Values，就乾脆用Value from cells來顯示分數吧！記住按下Select Range時把整列的數值也選取而不是單一儲存格；然後標籤第二行的分數，則可以來自於Series Name設定，做法就是在試算表中，把演員的名字（反正在教材中演員名字會另外顯示）換轉成分數便可。