上期介紹了圖表設計，這期繼續分享圖表設計和應用的相關知識。

往期回顧：

比較類圖表的設計和應用

首先解釋第一類圖表 —— 比較。比較圖表的作用，主要是用來對緯度的數值做對比的圖表類型。比較是為了直觀看到不同緯度之間的強弱、占比、趨勢。

1. 柱狀圖

柱狀圖的認識

柱狀圖，是一個使用柱狀圖形反映緯度數值的二維坐標軸圖表，也是我們最常見的圖表類型。

在這個二維坐標軸中，我們可以用縱軸代表數值，也可以用橫軸代表數值，另一個軸代表緯度。即在顯示的過程中可以使用縱向或者橫向的（橫向的也被叫成條形圖，都是一回事）。

柱狀圖通過柱體的長短，可以直接對比不同緯度數值的高低，但使用也有一定的差別。

緯度之間關聯性不是太強，或者按時間順序排列的就適合用橫向排列的方式，比如下方記錄我隨時可能猝死的打工人一周睡眠時間。而涉及排名或者時間的數據組，就適合使用縱向排列的，比如 Geekbench 展現不同 Mac 處理器強弱的排行榜（Pro 居然比 M1 還低？）。

兩種圖表的選擇還和 UI 環境的交互方式有關，在 APP 中，橫向排列的柱狀圖可以顯示的數量非常有限，想放更多緯度就要左右滾動，這個操作是比較麻煩的。而使用縱向排列的使用體驗就會明顯好不少。

再回到主題 “比較” 上，作為一個比較圖表，柱狀對具體顯示的數值表現是很含糊的，我們要關注的是不同緯度（柱體）之間的區別。

柱狀圖的繪制

柱狀圖的繪制作為我們講的第一個具體怎么動手繪制的圖表，就要多花點篇幅，講詳細一點。首先，所有常見的抽象圖表（不包含類似地圖這種很具象的內容），都是一個完整的模塊，它包含了圖表本身和前面我們講過的解釋性元素。

在每次具體設計圖表前，要先確定出具體在界面中應用的圖表區域，然后再對這個區域進行相關的劃分和布局，比如下圖在一個 400px*280px 區域設計，包含標題欄、篩選欄、縱軸標識、橫軸標識、圖形區域、圖形說明區域。

對于標題、篩選、說明 3 個區域，都是單純的布局設計，需要做多大，放多少內容，都根據項目需要和設計師自己決定，就不多說了。優先講它們的目的，是為了強調 —— 圖表區域的高度是減去其它區域后得出。下一步，才到了我們具體開始設計圖表的過程。

設計圖表不是做出來而已，而是要先從查看數據的角度出發。我們需要展示多少緯度，顯示多大量級的數值。

緯度數就是我們要顯示的柱體數量，對于這個區域，是要顯示一周、12 小時、一個年級、若干城市、若干人物還是其它的數量，同時，還要結合顯示區域的容納情況，比如我們上圖應用的區域，顯然是放不下一整個月的所有日期。

假設我們設置顯示的是過去一周的睡眠時長，那么過去一周怎么算，是從昨天開始往前一周，還是上一個周一到周日，或者周日第一天到周六……

對于緯度來說，使用文字來標識它們是必須的，我們就要對每個日期使用具體的文字描述，這就還需要確定文本的描述類型、格式。使用月日、星期幾、或者距今幾天。

文本內容和格式決定了每個標識文本的 —— 長度，這是最重要的屬性，如果文字太長，根本無法容納，就需要我們去調整應用的文字。不到萬不得已就避免傾斜或者豎排的方式，閱讀體驗會非常差。

確定好緯度后，我們就還要確定豎排的數值標識了，這里有兩個注意點，范圍和節點數，即 Y 軸底部到頂部的數值范圍區間，以及要顯示幾節數值出來。

范圍是對整個圖表可看性影響最大的因素之一，比如一個顯示體脂百分比的圖表，理論上最大范圍是 0-100%，但可以肯定超過 30%以上體脂的人鳳毛麟角，40%以上基本不會存在。那么 40-100 這個區間就完全不需要出現到圖表中。

或者，在一個百分比變動特別細微的場景，比如深圳房間監控的圖表，房價喜迎 18 連跌，10W 均價每次跌 10 塊錢，還用 0-10W 的顯示范圍就壓根看不出變化。而沒有變化，就意味著沒有對比性，柱狀圖也就缺少了存在的價值。

而節數一般處于 3-8 節之間，區域高度可以容納的行數來做決定，影響相對來說不大。所以，監控一周睡眠時長，我們使用 0-16 小時的范圍，并制定 5 個顯示節點，0（起點）、4、8、12、16，可以完成一個基本的表單框架。

在上方案例中，我們將 X 軸等分成 7 列，緯度標識在每列垂直居中對齊，Y 軸等分成 4 行（4 行才能畫 5 條線），數值標識文字和每行的分割線水平居中對齊。

有了這個框架，下一步才是加入柱體，首先確認柱體的寬度，再根據 Y 軸的對應比例制定高（用計算器打手動輸入），然后添加色彩。

要再次強調，對于柱狀圖來說，柱體默認狀態只需要填充一種色彩。因為對于這些緯度來講，這個柱狀代表的數值是同一種東西，沒理由用不同的顏色去強行做對比。

我們在這個圖表中唯一要對比的東西就是柱體的 “長度”，而顏色本身也是一種對比工具手段，只有在這里進行選中，或者是使用分組柱狀圖的時候，才需要通過不同色彩的配合來展示圖表。

2. 折線圖

折線圖的認識

折線圖也是一個非常常見的圖表，通過創建端點并使用直線連接的方式展示出高低不平曲折的線段。折線圖在圖表形式上和柱狀圖非常類似，但兩者在使用上是有一定區別的。

當我們要選擇使用柱狀圖的時候，往往關注數值的總量，或者維度代表的是不同的對象，比如不同 CPU 之間的跑分對比。但是折線圖的使用就沒有那么單一，它主要應用在同一個對象的同一維度變化對比中。

比如，我們監控 CPU 的占用頻率，那么維度使用時間，數值用百分比，這里面產生的數據都是圍繞 CPU 的占用頻率展開，但如果維度改成了當前時間不同核心的占用數值、溫度，那么我們就肯定不會用折線圖來表示。

折線圖的使用是要通過線段的曲折來反映數值的波動，在應用過程中往往不作為一個靜態的圖表展示，而是應用于監控的場景，比如監控網站在線人數、CPU 溫度、同一地區降水量等等。

而在折線圖中，最大的認知誤區就是對于曲線的線段的應用了。在數之不盡的網上飛機稿中，使用曲線的折線圖表 90% 以上都是錯誤的。

這要回歸本質來探討，折線圖也是進行對比的圖形，如果沒有直觀的波動，那么這個圖形帶來的信息量就非常有限。曲線會因為圓角的緣故而降低波動帶來的沖擊力，甚至抹平這種對比。

只有在必定會連續出現極大波動的圖表中才適合使用曲線，即會有一個圍繞在中間值數值，曲線進行正負兩端移動的類型。比如監控呼吸中含氧量（呼和吸一個周期的維度）。

作為折線圖，在一些數值代表完成、占滿、填充的概念時，往往就會覺得單純的線段表示不夠直觀，于是就產生了將下方的區域填充色彩的 —— 面積圖。只展示一個數值類型不夠要加入多個數值和線段的就叫折線堆疊圖。

折線圖的繪制

折線圖的繪制，框架和柱狀圖基本一致，數值的定義方式相同，而定義維度會有一定的差異。

通常，為了展示的閱讀體驗更佳，建議在 X 軸的左右兩側預留一點內邊距，然后確認需要展示的維度數量，每個維度量為一個豎線，將這些豎線等分到中間區域即可，對每個刻度的標識文本根據該豎線居中對齊。

比如定義一個一周起床時間的折線圖，那么 7 條線段就會等分得到下面的圖表：

有了這樣的基礎，我們就可以根據每個維度的對應數值，將端點結合 Y 軸數值添加進豎線中，然后使用鋼筆工具的線段將它們依次連接即可。完成圖形后，豎線作為參考線就可以刪除不用了。

要注意，折線圖的端點圖形不是所有場景下都要畫出來，而是會根據實際情況決定。如果維度的數量非常密集，尤其類似股價圖這種包含大量維度節點的，那么端點完全就是累贅。只有端點數控制在合理范疇（要自己判斷）的時候，才有添加的必要。

3. 雷達圖

雷達圖的認識

雷達圖，相信大家看到最多的地方就是在游戲的角色面板或者武器面板中。雷達圖是一種偏向概括性的圖表，并不能用來體現大數值和高頻變化，用來對比同一個對象不同維度數值的圖表。

雷達圖的應用，首先要確認出不低于 5 個的維度，并且這些維度可以使用相同的數值體系。并且，這些維度最好是由同一個對象身上拆分出來的，而不是 5 個維度指代不同的對象。

簡單來講，就是我們可以用雷達圖來表現一個學生不同科目的水準，這樣雷達圖可以大致概括這個學生科目掌握情況和相對的強弱。

但是不應該用雷達圖來表示不同學生同一科目的水準，那就只是更基礎的對比，用柱狀圖就可以了。

當然，雷達圖中的占用內容，也可以添加多個對象，一個雷達圖中可以放多個同學不同科目掌握水平的疊加圖形，以此對比他們的差異。

雷達圖的繪制

雷達圖的繪制，也是優先完成對描述性區域的設計，然后再開始圖形的設計。但雷達圖卻不是先確定圖形尺寸再增加對應文字，而是先把維度文字大致填充進去再繪制多邊形。

因為雷達圖中，我們對維度的描述，基本只能設計到不同端點外部去，那么文字本身的數量、占比，就會對圖形的顯示產生非常大的影響，并且在雷達圖中維度的描述文字是必須的，過度精簡還是用其它方式體現都很不直觀，所以優先預留足夠的文字空間。

然后，根據我們需要的維度數量繪制一個相等邊的多邊形，并設置合理的數值。下一步，就是確定出這個多邊形內所包含的數值刻度數量。假設除圓心外總共要顯示 5 級，那么就要畫 5 個疊加的等邊形，那么我們就從最大的那個等變形入手，再復制 4 個出來，對它們分別乘以 80%、60%、40%、20% 即可。

最后，再將每個維度對應數值根據百分比將端點打在維度的直線上，再用鋼筆工具將每個端點連接起來創建一個完整的不規則多邊形，就完成了雷達圖的設計。

如果想要在一個雷達圖添加多個對象，只要用不同顏色描邊繪制多個等變形即可，如果要填充這些圖形，就一定要使用透明度填充來完成，否則可能遮擋后方的端點，導致圖形不全。

總結

小聲 BB：學習圖表設計，理解大于實操。在你們正式項目里設計應該很少，真正應用的場景是做匯報 PPT 用……

圖表設計部分的分享比較麻煩，推進速度快不起來，應該還有兩篇~不過提前預告一下，最終 B 端這個系列會做一套更完整的匯總型 PDF 文檔，作為工具書一樣推出出來。

我們下篇再賤~~

歡迎關注作者的微信公眾號：「超人的電話亭」