無論是數(shù)據(jù)展示設計還是工作匯報中，都離不開圖表的運用。相較于繁瑣的數(shù)據(jù)內容，用戶可以更好更快了解大小、位置、顏色、形狀等視覺信息?？梢暬^后的數(shù)據(jù)可以加深人們對數(shù)據(jù)的理解和記憶。

本章主要講一些關于制作圖表的基礎知識和注意點，希望這些內容能在你設計業(yè)務過程中有所幫助。

常見圖表特征

想做好數(shù)據(jù)可視化？先掌握常見 5 類圖表的特點和設計細節(jié)

"數(shù)據(jù)可視化的目的，是要對數(shù)據(jù)進行可視化處理，以能夠明確地、有效地傳遞信息。

*以下內容僅供參考和交流，圖片內容不代表真實尺寸，請結合特定產品靈活使用。

圖表簡介

1. 圖表與表格的區(qū)別

表格

在數(shù)據(jù)可視化中，表格是最常見的一種，可以查看和處理大量的數(shù)據(jù)。不同類別的標簽可以傳達特定的信息內容，顯示準確而具體的數(shù)據(jù)，并有助于發(fā)現(xiàn)個體數(shù)據(jù)的價值。

圖表

圖表可以呈現(xiàn)數(shù)據(jù)的整體形態(tài)(如形態(tài)、趨勢、對比等)，更加直觀明了，同時也不會分散人的注意力，有利于快速展示大量的數(shù)據(jù)關系。

2. 圖表設計流程

正如上圖所示，圖表是展現(xiàn)數(shù)據(jù)的一種重要展現(xiàn)形式，可以將數(shù)據(jù)以及數(shù)據(jù)關系直觀的展示出來，能幫助我們更加快速、直觀的傳達數(shù)據(jù)信息。

那如何挑選合適的圖表呢？在我看來大致分為三步：

1. 數(shù)據(jù)分析：對需要可視化的數(shù)據(jù)進行分析，明確需要傳達的核心信息；
2. 數(shù)據(jù)編碼：將抽象的數(shù)據(jù)轉化適用圖表類型（如形態(tài)，趨勢，對比等）；
3. 用戶理解：將可視化完成圖表呈現(xiàn)給用戶傳達數(shù)據(jù)信息；

在數(shù)據(jù)編碼階段設計師需要通過設計 (比如突出重點、減少視覺干擾等）來助力數(shù)據(jù)的表現(xiàn)，提升用戶對圖表理解的效率和準確性。

接下來我將從圖表主要構成元素的角度來分析如何在數(shù)據(jù)編碼階段通過設計提高用戶對信息的理解與傳達。

圖表元素詳解

1. 圖表的構成

先簡單地介紹一下圖表構成，圖表是由：標題、坐標軸、圖形、圖例、信息標簽組成。

1. 標題：描述圖表的展示內容主題，包括主標題和副標題；
2. 信息標簽：對當前數(shù)據(jù)的內容提示信息，常見交互形式：鼠標在懸停時出現(xiàn)、固定在圖形上；
3. 圖例：當圖表多內容與數(shù)據(jù)時，對內容與數(shù)據(jù)的說明；
4. 坐標軸：數(shù)據(jù)關系映射在坐標系的視覺展示，包括軸線和標尺。
5. 圖形：數(shù)據(jù)在視覺展示中映射出來的圖形，可以反映數(shù)據(jù)差異與關系，例如常見的折線圖、柱狀圖；

每一個元素都有它存在的意義。在實際使用中不一定非得把元素全部展示出來，精簡化顯示想要展示的內容即可。

2. 標題

一個好的標題是從過稿開始。

簡潔明了、表達準確的標題可以迅速讓讀者理解圖表的主題，而且當圖表的結論是單一且唯一時，可以將其作為展示數(shù)據(jù)的元素，用于呈現(xiàn)數(shù)據(jù)的結論或總量，讓用戶在初次瀏覽圖表就能通曉圖表在說什么。如下圖所示在標題中直接顯示圖表的數(shù)據(jù)結果。

3. 圖表的選擇

一個合理正確圖表可以呈現(xiàn)數(shù)據(jù)的整體形態(tài)(如形態(tài)、趨勢、對比等)，讓數(shù)據(jù)更加直觀、突出重點。

了解圖表的分類和概念是進行設計和根據(jù)數(shù)據(jù)展示來選擇圖表的依據(jù)。那如何選擇合適的圖表？

安德魯·阿伯拉（Andrew Abela）制作的一份圖表類型選擇指南（This Guide），將圖表展示關系可大致分為 4 類：比較、分布、構成、聯(lián)系四種類型（見下圖）。

但考慮到日常使用的數(shù)據(jù)分析以及常用圖表組件庫，上圖中存在有些圖表使用頻率低。所以我參考了上圖的部分內容，再結合個人工作經(jīng)驗重新對其總結，重新整合成三個維度（見下圖）。

補充：在給大家整理分享素材的時候才發(fā)現(xiàn)，阿里的 Antv 制作了更詳細的圖表分類目錄，包含比較、趨勢、組成、占比、分布、排名、關系、空間等 8 個大類。（這樣顯得我很呆，建議大家收藏一下網(wǎng)站?。?

訪問鏈接： https://antv.vision/zh

比較

圖表在表達比較關系最常用就是柱狀圖（條形圖）和折線圖。在展示相同類別之間比較關系常用柱狀圖（多個類別時則常用條形圖），在展示關于時間變化關系是常用折線圖。

折線圖

折線圖通過各個數(shù)據(jù)節(jié)點相互連接而成線條，通過線條的波動來顯示數(shù)據(jù)隨有序元素變化的圖表。常用于反映數(shù)據(jù)隨著有序元素變化（常用于時間）推移而產生的變化趨勢。比如：

1. 近 10 年全球溫度的變化情況；
2. 本學期，某某某學生語文成績變化情況；
3. 事故數(shù)量隨著時間推移的變化情況：

折線圖注意

（1）為了圖表展示的可讀性，折線圖中線條的數(shù)量建議應當控制 3 條內，至多不用超過 7 條。

（2）為了圖表視覺效果的易讀性，線條應當使用實線，來突出視覺重點。

（3）當圖表展示不需要精確呈現(xiàn)時，而且重視整體變化的趨勢，可以使用曲線，反之折線。

柱狀圖

柱狀圖是通過矩形高度的差異展示的數(shù)據(jù)比較關系的圖標。主要作用是將多個數(shù)據(jù)在同一條件下，進行數(shù)據(jù)值的比較以此來判斷多個數(shù)據(jù)值哪些數(shù)據(jù)值相對比較大或相對比較小。比如：

• 各專業(yè)方向 2020 年工程師的工資信息圖表報告；
• 2021 年全球各國世界人口的增長：

補充：在需要顯示準確數(shù)值時使用，最好不要用柱狀圖來比較。

柱狀圖注意

（1）在使用圖表展示時應當選擇合適的間距寬度去適配柱條的寬度，來增加數(shù)據(jù)易讀性。

推薦：間距寬度可以使用在 1/2 柱寬到 1 柱寬之間。

（2）圖表避免使用過多的顏色，降低用戶獲取數(shù)據(jù)的認知成本。

說明：當需要強調某個數(shù)據(jù)時，可以使用顏色來突出顯示有意義的數(shù)據(jù)點。

條狀圖

在視覺上條形圖與柱狀圖比較類似，看上去只是交換了 X 軸與 Y 軸的位置，而且圖表功能也較為類似，但不同的是，條形圖對內容承載相對于柱狀圖而更多，而且由于視覺動效是縱向延展性，從上到下的閱讀方式符合用戶閱讀習慣。比如：各種排行榜。

其實在大多數(shù)情況下，條形圖和柱形圖是可以互相替換的，但存在以下情況建議使用條形圖：

• 在涉及到排行時最好使用條形圖，視覺動效從上到下的閱讀方式符合用戶閱讀習慣；
• 標尺標簽較名字長時，建議條形圖。例如：省份名稱加城市名稱；

條形圖注意點

（1）在使用條形圖，應當對數(shù)據(jù)有序排列，且統(tǒng)一視覺動線軸標簽右對齊。

說明：條形圖本質是一種比較關系圖表，進行照邏輯排序可以引導用戶更好地閱讀數(shù)據(jù)。

構成

餅圖

餅圖是通過扇形角度占總圓的大小展示的數(shù)據(jù)構成的圖標。在餅圖中，每個扇形角度的大小表示部分和整體的關系。適合用于展示單一維度數(shù)據(jù)的占比，比如：

• 70 億人在做什么；
• 2021 年廣東營業(yè)額構成情況；

環(huán)形圖

環(huán)形圖在定義和作用上和餅圖相同，其實本質上就是餅圖中間區(qū)域挖空，但是環(huán)圖的視覺降噪會比餅圖好。

餅圖&環(huán)形圖注意

（1）在數(shù)據(jù)占整體的百分比時，餅圖&環(huán)形圖扇形角度大小與其相應的值成比例，所有全部相加必須為 100%。

（2） 餅圖&環(huán)形圖不適用分類過多的場景，分塊數(shù)量盡量控制在 5 個以內，最多不要超過 9 個，否則閱讀體驗會很差。

解決方法：當數(shù)據(jù)類別較多時，可以將不重要的數(shù)據(jù)類別合并為"其它"，可以有效避免分類數(shù)量過多，或者直接改為使用條形圖或者表格展示數(shù)據(jù)。

聯(lián)系&分布

散點圖

散點圖是將數(shù)據(jù)點展示在直角坐標系平面上的的圖表。表示數(shù)據(jù)隨變量而變化的分布趨勢，比如：

今年的單品成本和收入分布情況；

氣泡圖

氣泡圖可以看作是散點圖的變形，但與散點圖不同的是，氣泡圖增加了第三個變化量（氣泡大小的變化），較大氣泡就表示較大的值?？梢酝ㄟ^氣泡的位置分布和大小，來分析數(shù)據(jù)的分布規(guī)律。

散點圖&氣泡圖注意

（1）當數(shù)據(jù)量過少時，不推薦使用散點圖&氣泡圖

（2）在圖表上添加趨勢線可以幫助用戶直接獲取數(shù)據(jù)結果

地圖

通過視覺重點顯示數(shù)據(jù)集中區(qū)域或者數(shù)據(jù)所在地區(qū)來展示的圖表。通常使用地圖作為背景，對數(shù)據(jù)的所在地理分布通過顏色深淺等元素的變化來容易判斷數(shù)據(jù)分布大小情況。比如：

• 2020 年全國各地土豆產量統(tǒng)計；
• 某某某企業(yè)在全國各地的門店數(shù)量；

地圖圖表使用建議

（1）數(shù)據(jù)內容需要和地理位置相關；

（2）當你通過顏色深淺變化來展示數(shù)據(jù)時，要遵循顏色梯度變化和數(shù)值增減同步變化，數(shù)據(jù)越大顏色越深；

（3）超級重要：由于圖表需要使用地圖為背景，需要使用標準地圖。下載推薦： http://bzdt.ch.mnr.gov.cn/

圖表字典

上面介紹了常用的圖表以及使用注意事項，但是圖表類型遠遠不止于此，還有很多非常用的圖表類型，這次我先給大家列出來：雷達圖，K 線圖，盒須圖，熱力圖，旭日圖，?；鶊D，樹圖，漏斗圖，儀表盤等。

更多圖表類型

如何做好視覺可視化設計？我總結了這72種圖表類型

視覺學習者（Visual learner）是那些用圖像進行思考的人[1]，這些人將腦中的畫面轉述成詞語去與他人進行溝通。

4. 圖例

圖例是對內容與數(shù)據(jù)的說明，是圖表中不可或缺的部分。由于不同圖表展示樣式差異很大，圖例的位置需要考慮整體布局進行擺放，避免圖例位置導致頁面統(tǒng)一性差，增加用戶的閱讀成本。

在這里推薦兩處位置放置圖例，分別為圖表的左上角和右側。當圖表是折線圖、柱狀圖時，圖表整體是左右兩端對齊的類型，建議將圖例放置在圖表頂部。當圖表是餅圖時，圖表整體存在空余空間時，建議將圖例放置在圖表右側，縮短用戶對照圖例和圖表的路徑，提高信息獲取效率。而且根據(jù)人視覺"F  型"動線，圖例應該是從上至下，從左往右的方式進行排序。

注意點 Q&A

為什么圖表構成細節(jié)元素沒有詳細去講解，卻放在注意點環(huán)節(jié)，因為我們大多數(shù)工作中，其實很多使用的插件或者組件庫，他們已經(jīng)對圖表細節(jié)進行了視覺規(guī)范，所以關于圖表相關知識，理解遠遠大于實操。

1. 坐標軸

坐標軸是大部分圖表的重要構成部分，是定義坐標系和數(shù)據(jù)的映射關系的展示。

（1）為了提高用戶閱讀體驗，坐標軸需要區(qū)別于其他的網(wǎng)格線突出顯示。

（2）為了能夠讓用戶快速準確獲取到的數(shù)據(jù)信息，在設計時應該減少視覺干擾，突出主圖形，弱化網(wǎng)格線。

推薦：元素與背景顏色的明度對比在 1.6:1 左右，視覺強度偏弱但人眼能夠看清的程度。

2. 顏色無障礙

顏色作為常見的數(shù)據(jù)表達手段，是數(shù)據(jù)可視化設計中重要的一部分，通過不同顏色明確體現(xiàn)數(shù)據(jù)的分類、數(shù)值大小等。雖然現(xiàn)在存在很多配色工具和設計組件庫來選擇使用，但是往往在這些色板看起來還不錯情況下，卻存在著顏色在黑白稿辨識度不夠高的問題，因為我們在設計時我們還需要考慮到色盲和色弱群體。

為了改善這個情況，我們可以參考大廠的顏色規(guī)范，除了使用不同顏色來做出差異，還可以在同顏色下對明度改變形成對比，提高顏色在黑白稿辨識度，提高設計的無障礙化。

推薦：在配色方面建議，可以多參考一下大廠的組件庫。

常用的圖表資源統(tǒng)計

1. 組件庫

AntV G2（sketch）

訪問鏈接： https://antv.vision/zh

G2 一套面向常規(guī)統(tǒng)計圖表，以數(shù)據(jù)驅動的高交互可視化圖形語法，具有高度的易用性和擴展性。使用 G2，你無需關注圖表各種繁瑣的實現(xiàn)細節(jié)，一條語句即可使用 Canvas 或 SVG 構建出各種各樣的可交互的統(tǒng)計圖表。

figma 圖表合集

訪問鏈接： https://www.figma.cool/resources/2

sketch 圖表合集

下載鏈接： https://pan.baidu.com/s/1pL6iY4F

XD 圖表合集

訪問鏈接： https://www.behance.net/gallery/60714355/FREE-Dashboard-UI-Kit-for-Adobe-XD

訪問鏈接： https://psdrepo.com/free-psd/analytics-charts-freebie/

2. 數(shù)據(jù)圖表生成網(wǎng)站

CHARTCUBE

訪問鏈接： https://chartcube.alipay.com/

AntV 在線圖表制作工具，拖拽之間快速搞定圖表制作。

ECharts

訪問鏈接： https://echarts.apache.org/en/index.Html

ECharts 是一款基于 Javascript 的數(shù)據(jù)可視化圖表庫，提供直觀、生動、可交互、可個性化定制的數(shù)據(jù)可視化圖表。ECharts 最初由百度團隊開源，并于 2018 年初捐贈給 Apache 基金會，成為 ASF 孵化級項目。

鏑數(shù)圖表目圖片

訪問鏈接： https://dycharts.com/apPV2/#/pages/home/index

花火數(shù)圖

訪問鏈接： https://hanabi.data-viz.cn/index?lang=zh-CN

3. 常用的圖表插件

PS 拉框助手(支持 Figma、Sketch、XD、PS)

訪問鏈接： https://www.pslkzs.com/ps/index.php

它能夠快速的生成：折線圖、柱狀圖、餅圖、雷達圖、散點圖、氣泡圖、玉玨圖、國內外省市的地圖。

還有很多其它好用的插件，麻煩給我收藏，錯過今天，后悔每一天?。。igma、Sketch、XD 插件在頁面下方！??！

Figma 插件推薦

訪問鏈接：https://www.figma.com/community/plugin/731451122947612104/Charts

 

訪問鏈接：https://www.figma.com/community/plugin/734590934750866002/Chart

Sketch 插件

訪問鏈接： https://kitchen.alipay.com/

訪問鏈接： https://github.com/pavelkuligin/chart

XD 插件

訪問鏈接： https://www.vizzycharts.com/

總結

以上就是本篇文章的全部內容，如果這對于你的工作有一點幫助那么備感榮幸，很感謝你能夠耐心看到最后，希望留下你的交流意見，我們下篇再見。

提問：如果需要以"2021 我國各地區(qū)成年人單身人口增長數(shù)量"為數(shù)據(jù)，應該選擇什么圖表？（別想了，去談戀愛啊～）

參考文獻：

1. 能分清直方圖和柱狀圖，你就是圖表屆的"頭號"玩家 —— 鏑次元數(shù)據(jù)傳媒實驗室
2. 數(shù)據(jù)的力量遠不止"好看"這么簡單 —— 網(wǎng)易UEDC
3. 數(shù)據(jù)可視化是什么 —— DecemberCafe
4. 如何讓自動算色提升你的工作效率—— KID商業(yè)化
5. 如何設計實用易讀的圖表 —— 劉穎
6. 螞蟻數(shù)據(jù)可視化

作者：白紙黑字UXD