基本的控件單元完成后，下面就要開始介紹 B 端設計的另一座大山，圖表的設計了。

往期回顧：

圖表是什么

在今天，隨著大數據和數據分析理念深入人心，圖表在 B 端設計的地位越發重要。那么什么叫圖表呢？

圖表指可以直觀展示統計信息屬性和數值的圖形表格，對于多數人來說第一次接觸圖表概念都源自中小學計算機課程中的 Office Excel 表格教學中。

要理解圖表，你就繞不開 Excel 這個軟件或其功能形式。我們都知道 Excel 是一個表格工具，可以任意填寫表格化的信息內容進去。

但那只是呈現出來的表象，Excel 的真實身份應該是一個數據記錄工具，通過這種表格形式記錄班級學生成績、客戶聯系方式、倉庫進銷記錄等等。每一條記錄下的信息都是一條獨立的 “數據”。

盯著表格看，我們確實可以看到一些具體的信息、數據、內容。但是，數據的作用只是讓我們自己去精確定位想要的內容而已？顯然是否定的。

我們利用數據的目的，還包括要從眾多的數據條目中獲得反映真實情況的 “規律”、“趨勢”，如果我們只盯著數據條目瀏覽，是很難找出這些信息的。

于是，人類就發明了圖表這種可視化工具，幫助我們對數據進行總結，用更直觀的視覺方式來認識數據和找出規律和趨勢，這也是為什么 Excel 是最強大的圖表生產軟件的原因之一。

圖表的類型

數據根據自身的特性和使用場景，對規律的反映也各不相同。比如你想知道某個城市房子均價趨勢和某個區房子銷售總量在全市的占比，就是兩種完全不同的數據總結形式。

面對這種統計上的差異，我們也就創造出了不同的圖表展示類型，幫助我們更有效的認識數據。比如我們從初中開始就學習過的柱狀圖、折線圖、餅圖等等。

但是，在數據和統計的世界里，包含的圖表類型遠遠不止這幾種，還有非常多只能應用在特定場景，你有點印象在新聞見過的，或感覺是顯示故障生成的圖表類型。

主流書籍、干貨將這數以百計的圖表劃分成 4 個大類，分別是比較、分布、構成、聯系。每種類型對應不同的數據展示要求和作用。

而阿里的 Antv 則定制了一個更詳細的圖表分類目錄，包含比較、趨勢、組成、占比、分布、排名、關系、空間等 8 個大類。

可以訪問下方的鏈接查詢：https://antv.vision/zh

了解圖表的分類、概念是未來我們進行設計和根據數據展示需要選擇圖表的依據和知識基礎。具體的每個分類包含的意義，以及使用規則，我們會在后面解釋。

并且，除了應用緯度上的區分，我們還會將圖表區分成一般的圖表和進階圖表，具體區分理由會在下方解釋。

圖表的構成

雖然圖表包含了很多分類，但是圖表都是由基本的數據內容生成的，它們包含具體的生成規律。

對于基礎的圖表來說，它們必然包含兩種元素 —— “緯度”和“數值”。當我們需要去創建圖表的時候，就要做一個選擇，使用什么緯度和數值。

比如下面這組數據，在一次體檢中有三個班級的 5 個同學，他們的身高、體重、體脂率、肌肉含量、視力各不相同。

在這個數據圖表下，我們要生成一個柱狀圖，那么緯度就有兩個可選項，班級或者具體同學，數值則包含身高、體重、體脂、肌肉量、視力五個屬性。

比如我們使用同學做緯度，體脂率作為數值，那么就可以生成基礎柱狀圖。

緯度和數值是構成一般圖表的基石，緯度表示的是你圖表中要包含多少不同的模塊，數值則表示你要顯示這些模塊的哪些數值。

緯度通常指某個具體的人、日期、事件、分類，通常是不可量化的內容。而數值則是指包含可量化的數據類型，重點要記得數值是指 “數據類型”，而不是指具體的參數值。

再進一步，上方生成的圖表，雖然直接反映了我們選擇的緯度、數值的情況，但是一個完整的圖表還會包含一些 “解釋” 性元素，來讓觀看者更好的認識這些圖形和信息。

所以，一個完整的圖表中可能還會包含標題、單位、緯度圖例、網格、選中提示等內容，用來提升其閱讀性。

不同圖表，需要包含的元素會有一定的差異，需要因地制宜，我們會在后面的詳細介紹中添加一部分介紹的信息。

一般圖表和高級圖表

最后，我們還要解釋一下，什么是一般圖表，什么是高級圖表。

一般圖表就即只反映緯度、數值兩個方面的圖表類型，基本都是我們日常生活中經常接觸，馬上都能看懂的。

但是進階圖表就不是那么簡單了，進階的圖表包含除了緯度、數值外的其它類型數據，如分類、地區、日期、性別等不同種類。

比如下面這個散點圖，除了身高（緯度）、體重（數值）外，還表現了個體（圓點）、性別（色彩）。在圖表本身的解釋性元素中，還包含分布區域、最大最小值標識、體重/身高均值。

這已經超出沒一個沒有接觸過統計的新手認知范疇了，是需要具體學習才能學會如何閱讀和應用的圖表。

這還是最基礎高級圖表，往后還有類似桑基圖、K 線圖（韭菜的自我修養）、環形布局關系圖等類型，它們有各自使用的規范、參數，以及應用的場景。

這些圖表確實非常的復雜抽象，制作起來也非常麻煩。但是，這些圖表并不是展示數據的終點。因為當數據涉及到真實世界的客體時，我們發現可以通過更直觀的展示方式來呈現數據，將某些緯度或數值用更低門檻的圖形來表示，理解起來就更容易。

比如下面的案例，我們不用將城市緯度作為一個枯燥的字段放進圖表中，而是直接使用地圖進行呈現，那么不僅理解起來更直觀，而且非常方便我們對區域進行分析和對比。

這就是所謂的數據可視化的應用實例，數據可視化并不僅僅是做一些基礎的圖表，而是根據我們對數據分析的需求，輸出合適的可視化圖形。

掌握越多圖表類型、可視化應用案例，就越有助于我們應對復雜的項目數據展示需求。

結語

本篇內容分析到這里，下一篇分享會繼續分享圖表設計和應用的相關知識。

因為圖表的知識可以寫的實在太多了，所以大家如果有想了解的還是實際項目中的疑問，可以在下面留言，有合適的知識點我就可以添加到下篇分享中去。

感謝大家收看，下篇再賤～

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