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

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

一、圖表的定義

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

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

二、圖表的優(yōu)勢

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

第一：針對性

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

第二：直觀性

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

第三：拓展組合

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

三、圖表的元素構(gòu)成

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

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

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

四、圖表常見的分類

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

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

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

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

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

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

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

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

7. 漏斗圖：適用于流程流量分析。如業(yè)務上規(guī)范、周期長、環(huán)節(jié)多的單流程單向分析，通過漏斗各環(huán)節(jié)業(yè)務數(shù)據(jù)的比較能夠直觀地發(fā)現(xiàn)和說明問題所在的環(huán)節(jié)，進而做出決策。

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

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

五、圖表的應用場景羅列

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

六、插件推薦和網(wǎng)站合集

第一：插件

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

第二：數(shù)據(jù)圖表網(wǎng)站合集

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

七、總結(jié)回顧

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

作者：兆日 UCD