從人類誕生之日起，便有了信息的呈現形式，并伴隨著人類發展足跡不斷變遷。如今出現的任何信息可視化類型，并非一夜之前突現的新物種，幾乎都是從過去經典的表達式中發展而來。
17000 年前
如果你問最早的信息圖表設計師是誰，很多學者認為是遠古時代的洞穴人，他們是最早用圖像描繪成日常生活比如戰斗，野生動物、死亡和慶祝活動等等。
法國發現的洞穴繪畫遺址-拉斯科壁畫，距今約17000年
公元前 3000 年
古埃及象形文字，作為那時的正式書寫系統，開始使用符號來代表字母和概念，可追溯到公元前3000年。
公元前 550 年
希臘哲學家阿那克西曼德創造了第一個出版的世界地圖，這可以說是最早的可視化地圖了。
公元 950 年
歐洲人畫出了基于時間變化的折線圖，用于展示太陽，月亮等行星的位置變化趨勢，開始出現如今的數據圖表的雛形。
17 世紀
統計圖形之父威廉·普萊費爾，發明了我們今天經常使用的折線圖和條形圖，也被認為創建了面積和餅圖。普萊費爾是蘇格蘭工程師和政治經濟學家，并在1786年出版了商業和政治地圖集。
智能時代
隨著時代的發展，智能時代AR、VR 技術的興起，我們開始看多更多新穎的的數據可視化形式。
1992-2010年內世界小型武器和彈藥的進出口貿易數據展示
“里約+20”地球峰會期間的Twitter話題匯集成一顆顆大樹
二. 認識主流可視化圖表
如今隨著科學技術的發展，已經沉淀出豐富且經典耐用的信息可視化表達。無論在傳統的紙質媒體，還是如今手機、電腦，電視等各類終端的電子媒體都得以大放異彩。目前，各大可視化工具中有非常詳盡的圖表類型介紹，比如 Excel2010 的版本里面，提供了 10 類共 53 個圖表。AntV 平臺則提供了 15 類近 200 個數據圖表，現在我們就來普及一下基本知識。
常用可視化圖表分類
目前主流的可視化平臺把常用圖表分成九大類（來自 AntV ），分別是：比較、分布、關聯、占比、區間、流程、趨勢、時間、地圖。
1. 比較
顯示值與值之間的不同和相似之處。使用圖形的長度、寬度、位置、面積、角度和顏色來比較數值的大小，通常用于展示不同分類間的數值對比，不同時間點的數據對比。
典型圖表：柱狀圖、條形圖、直方圖、K 線圖、矩形樹圖等
2. 分布
顯示頻率，數據分散在一個區間或分組。使用圖形的位置、大小、顏色的漸變程度來表現數據的分布，通常用于展示連續數據上數值的分布情況。
典型圖表：散點圖、氣泡圖、熱力圖、箱型圖
3. 占比
顯示同一維度上占比關系
典型圖表：餅圖、環形圖、堆疊面積圖、堆疊柱狀圖
4. 關聯
顯示數據之間相互關系。 使用圖形的嵌套和位置表示數據之間的關系，通常用于表示數據之間的前后順序、父子關系以及相關性。
典型圖表：和弦圖、桑基圖（我有點讀不懂）
5. 區間
顯示同一維度上值的上限和下限之間的差異。 使用圖形的大小和位置表示數值的上限和下限，通常用于表示數據在某一個分類（時間點）上的最大值和最小值。
典型圖表：儀表盤、堆疊圖
6. 流程
顯示流程流轉和流程流量。一般流程都會呈現出多個環節，每個環節之間會有相應的流量關系，這類圖形可以很好的表示這些關系。
典型圖表：漏斗圖、桑基圖
7. 趨勢
分析數據的變化趨勢。使用圖形的位置表現出數據在連續區域上的分布，通常展示數據在連續區域上的大小變化的規律。
典型圖表：折線圖、K 線圖、堆疊面積圖
8. 時間（個人認為時間可以放在各大類型中作為一個維度）
顯示以時間為特定維度的數據。使用圖形的位置表現出數據在時間上的分布，通常用于表現數據在時間維度上的趨勢和變化。
9. 地圖
顯示地理區域上的數據。使用地圖作為背景，通過圖形的位置來表現數據的地理位置，通常來展示數據在不同地理區域上的分布情況。
典型圖表：地圖
常用可視化圖表舉例分析
1) 柱狀圖
條形圖
展示多個分類的數據變化和同類別各變量之間的比較情況。使用垂直或水平的柱子顯示類別之間的數值比較。其中一個軸表示需要對比的分類維度，另一個軸代表相應的數值。
優點：對比分類數據。
缺點：分類過多則無法展示數據特點。
# 相似圖表
堆積柱狀圖：比較同類別各變量和不同類別變量總和差異。
百分比堆積柱狀圖：適合展示同類別的每個變量的比例。
2) 條形圖（也可歸到柱狀圖大類中）
類似柱狀圖，只不過兩根軸對調了一下。
優點：類別名稱過長，將有大量空白位置標示每個類別的名稱。
缺點：分類過多則無法展示數據特點 。
#相似圖表
堆積條形圖：比較同類別各變量和不同類別變量總和差異。
百分比堆積條形圖：適合展示同類別的每個變量的比例。
雙向柱狀圖：比較同類別的正反向數值差異。
3) 折線圖
折線圖
堆積面積圖
展示數據隨時間或有序類別的波動情況的趨勢變化。
優點：有序的類別，比如時間。
缺點：無序的類別無法展示數據特點。
# 相似圖表
面積圖：用面積展示數值大小，展示數量隨時間變化的趨勢。
堆積面積圖：同類別各變量和不同類別變量總和差異。
百分比堆積面積圖：比較同類別的各個變量的比例差異。
4) 散點圖（以及氣泡圖）
散點圖
氣泡圖
用于發現各變量之間的關系。
優點：存在大量數據點，結果更精準，比如回歸分析。
缺點：數據量小的時候會比較混亂。
# 相似圖表
氣泡圖：用氣泡代替散點圖的數值點，面積大小代表數值大小。
5) 餅圖
餅圖
玫瑰圖
餅圖可以很好地幫助用戶快速了解數據的占比分配。
優點：了解數據的分布情況。
缺點：分類過多，則扇形越小，無法展現圖表。
# 相似圖表
環形圖：挖空的餅圖，中間區域可以展現數據或者文本信息。
玫瑰餅圖：對比不同類別的數值大小。
旭日圖：展示父子層級的不同類別數據的占比。
6) 詞云
詞云
7) 箱型圖
箱型圖
以上只是部分常用圖表樣式，更多詳細的圖標樣式及其介紹，可前往阿里數據可視化平臺 AntV 學習。
數據圖表使用指南
數據圖表如此繁雜多樣，到底該如何靈活運用呢？
數據圖表專家 Andrew abela 設計了一張匯總圖，從全局出發，幫助我們快速確定圖表樣式
Andrew abela 繪制的圖表選擇指南被廣泛運用
這其實為我們提供了一種快速選擇數據圖表類型的思考流程，四步走：
1.分析數據源
2.確定展示的類型
3.選擇的變量類型及數量
4.選擇對應的數據圖表
三. 實用的學習通道
介紹這些基本知識是遠遠不夠的，網絡上有非常多的平臺、工具和團隊可以供我們深入學習和研究數據可視化設計，以下列舉了我平時經常光顧的學習資源。
1. 了解數據可視化設計的歷史淵源（完整版）：
數據可視化圖表發展史：http://www.datavis.ca/milestones/index.php?group=Pre-1600&mid=ms9
2. 各類可視化圖表的概念及用法（超詳細）：
螞蟻金服可視化解決方案 AntV：https://antv.alipay.com/zh-cn/index.html
圖表示例：https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html
圖表用法：https://antv.alipay.com/zh-cn/vis/chart/index.html
3. 前端可視化圖表庫（前端可直接調用）：
ECharts：http://echarts.baidu.com/index.html
AntV：https://antv.alipay.com/index.html
Google Chat：https://google-developers.appspot.com/chart/
4.數據分析工具：
Google Analytics: https://analytics.google.com
百度統計：https://tongji.baidu.com/
5.運用可視化工具搭建自己的可視化圖表（可以建立自己的可視化圖表）：
BDP個人版：https://me.bdp.cn/home.html
平時還可以使用 Excel 或 Numbers 整理和輸出可視化圖表
寫在最后
除了學習鞏固數據相關的基礎知識以外，更需要在日常工作學習中培養習慣，養成數據化的思維方式。
- 1.保持對數據的敏感度
- 2.嘗試利用可視化工具創建圖表，鍛煉分析整理的能力
- 3.密切關注自家產品線的用戶行為數據，解讀各類數據指標，培養分析的習慣
- 4.關注前沿技術和可視化新形式，保持開放包容的心態
好了，文章就介紹到這里，大家一起學來吧。
預告：下一篇系列文章著重介紹可視化設計的具體方法，譬如從色彩、布局、交互等方面如何設計數據圖表，歡迎持續關注。
作者：又彬
轉載請注明：學UI網》數據可視化設計淺析與研究（一）
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司