工作中 B 端數據圖表使用頻率不多，但真的接到需求時，自己也會詢問周圍同事或網站，圖表的類型有哪些？由哪些元素組成、每一類型的圖表應該對應的場景有哪些？為了設計圖表時得心應手，今天我們先一起探究下有關圖表的基礎知識。

本文以數據圖表的定義、優勢、構成、分類、應用場景羅列及可讓大家工作效率翻倍的網站和插件這六個部分，作為本文對圖表的初步了解，后續我們將以系列文章形式挖掘“數據圖表”這座寶藏。既然發現寶藏，定能夠淘到自己想要的“金子”，帶走它！下圖為寶藏地圖，請先領取！

更多圖表干貨：

一、圖表的定義

圖表是將研究對象的數據進行可視化表達，它可以呈現數據的整體形態、趨勢、對比等；更加直觀明了，同時也不會分散人的注意力，有利于快速展示大量的數據關系，圖表是數據的表現形式之一。

例如：在數據可視化圖表設計出現之前，我們多用于 Excel 表格進行羅列數據、計算等，如下圖把表格中的數字以圖形的形式進行展示，對于用戶來講圖形化要比一長串“數字”更吸引眼球。

二、圖表的優勢

作為一個設計師，接到需求時，面對龐大的數據，也會撓腦皮，問煩同事；但辦法總比困難多，大多數設計師會利用“可視化”圖形的方法，在工作中因數據具有針對性變得高效、直觀性顯得更易理解、數據樣式組合會更加的實用等這 3 個優勢，做到這三個優勢在整體上降低用戶閱讀數據的門檻和分析；那我們就結合例子分別看看這三個優勢：

第一：針對性

在工作中我們也會遇到不同類型的數據需要使用不同的圖表形式，例如曲線圖一般會用來顯示在一個連續的時間或者時間跨度上的變化，它的特點是能夠看到事物隨著時間的變化趨勢；柱狀圖使用垂直或水平的坐標顯示類別之間的數值比較，其中一個軸表示需要對比的分類維度，另一個軸代表相應的數值。我們使用圖表時，需要先對數據屬性進行判斷，再對哪種形式的圖表作出選擇。

第二：直觀性

圖表與文字相比，在數據的表現上非常直觀。如下圖，從只有“數據”到以折柱圖的形式呈現，不僅可以讓用戶一目了然地看到數據，還能讓用戶將數據進行對比。

第三：拓展組合

根據數據屬性與圖表對比，圖表有更強的拓展性，可以進行組合使用；圖表拓展性一般是根據基礎圖表樣式，以及數據的增加，拓展出系列或類似的圖表，例如我們常見的基礎柱狀圖，由于數據屬性多樣可以衍生出雙向柱狀圖、堆疊柱狀圖等。

三、圖表的元素構成

了解完什么是圖表及它的優勢后，接下來我們來看下圖表由幾個的基礎部分組成。圖表是由：標題、坐標軸、圖例、圖形、信息標簽等組成。如下圖示例：

1. 標題：標題簡潔明了，表達圖表主題，有些圖表只有一個主題，也有主標題與副標題；
2. 坐標軸：數據關系映射在坐標系的視覺展示，包括軸線（縱軸、橫軸）、標尺；
3. 圖例：圖表中信息和數據較多，需要用來數據屬性區別，一般會用圖例對內容與數據進行說明；
4. 信息標簽：鼠標在懸停時出現、固定在圖形上展示數據信息，這也是常見的交互方式，也是對當前數據的內容提示信息的一種方式；
5. 圖形：數據在視覺展示中映射出來的圖形，可以反映數據差異與關系，例如常見的柱狀圖、餅狀圖、折線圖；

如下圖在工作中出現或常見的小錯誤，會遺忘標題、圖例、信息標簽等。

四、圖表常見的分類

其實在了解圖表的分類和概念過程中發現，圖表是我們工作中使用圖表類型的依據，在了解圖表的過程中，發現安德魯·阿伯拉（Andrew Abela）制作的一份圖表類型選擇指南，他將圖表展示關系可大致分為 4 類：比較、分布、構成、聯系四種類型（見下圖）。此圖更多的幫助我們思考圖表的起點和思維，在設計實踐中并不都是每個人認可的組合方式。

數據圖表類型有很多，考慮設計師們習慣于搭建組件庫提高團隊效率，凡子整理了自身工作中常見的使用場景，并且從比較、占比、城市分布、排名等維度進行歸納，將圖表分為：柱狀圖、折線圖、餅狀圖&環形圖、面積圖、子彈圖、雷達圖、漏斗圖等常見類型并做簡單的使用場景概述，后面也希望做為圖表類型進行詳解。

1. 柱狀圖：多使用垂直或水平的坐標顯示類別之間的數值比較。柱狀圖除了單條柱狀圖，還可以多條柱狀對比，在信息過多，或者對比分類過多時豎向排布的柱狀圖（如上圖左上一）也是個不錯的選擇。

2. 折線圖：折線圖也被稱為曲線圖，一般會用來顯示數據在一個連續的時間或者是時間跨度上的變化，他的特點是能夠看到事物隨著時間的變化趨勢。

3. 餅狀圖：廣泛應用在各個領域，用于表示不同分類的占比情況，通過弧度大小來對比各種分類。

4. 面積圖：適用于百分比堆疊面積圖，例如：幾個月安卓手機各個版本在市場的占比情況；但是面積圖不適合的用在“分類數據的比較，如下圖錯誤與正確的使用。

5. 子彈圖：子彈圖更適合顯示階段性數據信息，例如季度的數據顯示

6. 雷達圖：雷達又叫戴布拉圖、蜘蛛網圖、星圖。是由一個點向 3 個或者 3 個以上不同維度的數據，它能夠用一張圖呈現多個緯度的數據量。它的對象屬性往往是多維度的。

7. 漏斗圖：適用于流程流量分析。如業務上規范、周期長、環節多的單流程單向分析，通過漏斗各環節業務數據的比較能夠直觀地發現和說明問題所在的環節，進而做出決策。

以上為大家簡單介紹常用的 7 種數據圖表類型和簡單場景（后續我們將作為另一篇文章詳解）。

感謝大家已經閱讀到此，接下來可以開啟法寶箱之一：推薦阿里的 Antv （網站建議收藏： https://antv.vision/zh/ ）此網站中有圖表分類目錄，包含比較、趨勢、組成、占比、分布、排名、關系、空間等 8 個大類?？炜焓障麓朔▽?，圖表效率要翻倍！

五、圖表的應用場景羅列

隨著數據可視化趨勢，其中數據圖表使用場景也可以分為信息圖表設計、B 端后臺界面設計、可視化大屏設計、系統后臺檢測、移動端界面設計、游戲數據 UI 這六大場景，由于文章篇幅問題，在此篇暫不過多贅述。

六、插件推薦和網站合集

第一：插件

1. https://www.figma.com/community/plugin/731451122947612104/Charts
2. https://www.figma.com/community/plugin/734590934750866002/Chart
3. https://kitchen.alipay.com/

第二：數據圖表網站合集

1. https://dycharts.com/appv2/#/pages/home/index
2. https://chartcube.alipay.com/
3. https://psdrepo.com/free-psd/analytics-charts-freebie/
4. https://echarts.apache.org/en/index.html

七、總結回顧

以上內容就是凡子在深夜碼字、整理圖片的成果，我們從圖表的定義、優勢、類型及簡易場景描述、過程中的小 Tips，網站和插件等六個部分對圖表進行學習和了解，希望可以為想要了解圖表知識的伙伴們解惑、帶來幫助，榮幸之至，此外還請期待圖表系列（二）《B 端后臺產品的圖表類型及使用場景詳解》。

歡迎關注團隊微信公眾號：兆日 UCD