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

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

一、圖表的定義

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

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

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

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

第一：針對(duì)性

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

第二：直觀性

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

第三：拓展組合

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

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

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

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

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

四、圖表常見的分類

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

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

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

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

3. 餅狀圖：廣泛應(yīng)用在各個(gè)領(lǐng)域，用于表示不同分類的占比情況，通過弧度大小來對(duì)比各種分類。

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

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

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

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

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

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

五、圖表的應(yīng)用場景羅列

隨著數(shù)據(jù)可視化趨勢(shì)，其中數(shù)據(jù)圖表使用場景也可以分為信息圖表設(shè)計(jì)、B 端后臺(tái)界面設(shè)計(jì)、可視化大屏設(shè)計(jì)、系統(tǒng)后臺(tái)檢測(cè)、移動(dòng)端界面設(shè)計(jì)、游戲數(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)勢(shì)、類型及簡易場景描述、過程中的小 Tips，網(wǎng)站和插件等六個(gè)部分對(duì)圖表進(jìn)行學(xué)習(xí)和了解，希望可以為想要了解圖表知識(shí)的伙伴們解惑、帶來幫助，榮幸之至，此外還請(qǐng)期待圖表系列（二）《B 端后臺(tái)產(chǎn)品的圖表類型及使用場景詳解》。

作者：兆日 UCD