可視化技術(shù)基礎(chǔ)知識(shí)

可視化技術(shù)基礎(chǔ)知識(shí)

1、可視化技術(shù)闡述...........................................................................2

1.1、什么是可視化？...................................................................3

1.2、為什么要可視化....................................................................5

第一個(gè)人：WilliamPlayfair(1759-1823).................................................................5

第三個(gè)人：JohnSnow(1813-1858).........................................................................7

第四個(gè)人：CharlesJosephMinard(1781-1870)...........................................................7

1.3、可視化的價(jià)值？...................................................................9

1.3.K可視化讓讀者可以最迅速的理解數(shù)據(jù)所要傳達(dá)的信息..........................9

1.3.2、可視化使復(fù)雜數(shù)據(jù)更易懂、更加客觀、更具說服力。...........................9

1.3.3、數(shù)據(jù)可視化幫助人，發(fā)現(xiàn)數(shù)據(jù)后的規(guī)律。.....................................10

1.3.4、大數(shù)據(jù)時(shí)代下的價(jià)值在于挖掘分析。..........................................10

1.4、可視化背后的關(guān)鍵.................................................................11

(1)了解聽眾...................................................................11

(2)足夠理解數(shù)據(jù)................................................................11

(3)講述一個(gè)故事..............................................................11

(4)保持簡潔....................................................................11

(5)合理區(qū)分展現(xiàn)平臺(tái)...........................................................12

1.5、可視化需要避免的大錯(cuò)誤..........................................................12

(1)錯(cuò)誤的信息..................................................................12

(2)不完整的信息................................................................12

(3)過于簡化數(shù)據(jù)................................................................12

(4)不恰當(dāng)?shù)目梢暬?............................................................13

(5)遺漏標(biāo)注....................................................................13

2、當(dāng)前有關(guān)可視化技術(shù)的技術(shù)、設(shè)計(jì)、企業(yè)、案例等.........................................13

2.1、當(dāng)前使用的可視化技術(shù).............................................................13

第1頁共37頁

(1)HTML5Canvas........................................................................................................14

(2)SVG.........................................................................................................................15

(3)WebGL.....................................................................................................................17

2.2、可視化大屏設(shè)計(jì)...................................................................18

2.2.1、布局排版...................................................................19

2.2.2、配色.......................................................................20

2.2.3、點(diǎn)綴.......................................................................23

2.2.4、動(dòng)效.......................................................................24

2.2.5、總結(jié).......................................................................26

2.3、當(dāng)前可視化技術(shù)的企業(yè).............................................................27

(1)數(shù)字冰雹....................................................................27

(2)光啟元-騰訊27

(3)DataV數(shù)據(jù)可視化-阿里云...................................................28

(4)偉景行......................................................................29

(5)其他企業(yè)....................................................................29

(1)天貓雙11案例................................................................31

(3)其他..........................................................................32

3、總結(jié)與規(guī)劃..............................................................................37

3.1、可視化需要共同努力..............................................................37

3.2、技術(shù)選型.........................................................................37

第3頁共37頁

1、可視化技術(shù)闡述

L1、什么是可視化？

可視化(Visualization)技術(shù)是關(guān)于數(shù)據(jù)視覺表現(xiàn)形式的科學(xué)技術(shù)研究。其中，這種“數(shù)據(jù)的

視覺表現(xiàn)形式”被定義為：一種以某種概要形式抽提出來的信息，包括相應(yīng)信息單位的各種屬性和變

量。

有點(diǎn)晦澀么，我們換個(gè)方式解讀。如果你經(jīng)常被領(lǐng)導(dǎo)批評(píng)PPT做得不好，我想你一定能夠理解這

句話“文不如表、表不如圖”，其實(shí)換位思考一下，假如你自己也做了領(lǐng)導(dǎo)，面對(duì)紛繁復(fù)雜的人、事

情況，應(yīng)該也會(huì)對(duì)高度總結(jié)的圖表產(chǎn)生好感。無論如何，賞心悅目的圖確實(shí)比表格讓人心情好很多。

W?am??i?n*QH■

B

QT

?*Ml'ED

Ml-?m

?l>???“

?i>?l-■?aft?■IM

數(shù)據(jù)可視化主要旨在借助于圖形化手段，清晰有效地傳達(dá)與溝通信息。但是，這并不就意味著數(shù)

據(jù)可視化就一定因?yàn)橐獙?shí)現(xiàn)其功能用途而令人感到枯燥乏味，或者是為了看上去絢麗多彩而顯得極端

復(fù)雜。為了有效地傳達(dá)思想概念，美學(xué)形式與功能需要齊頭并進(jìn)，通過直觀地傳達(dá)關(guān)鍵的方面與特征，

從而實(shí)現(xiàn)對(duì)于相當(dāng)稀疏而又復(fù)雜的數(shù)據(jù)集的深入洞察。然而，設(shè)計(jì)人員往往并不能很好地把握設(shè)計(jì)與

第3頁共37頁

功能之間的平衡，從而創(chuàng)造出華而不實(shí)的數(shù)據(jù)可視化形式，無法達(dá)到其主要目的，也就是傳達(dá)與溝通

信息。

我認(rèn)為數(shù)據(jù)可視化并不是簡單的把數(shù)據(jù)變成圖表。而是以數(shù)據(jù)為視角，看待世界。換句話說，數(shù)

據(jù)可視化的客體是數(shù)據(jù)，但我們想要的其實(shí)是——數(shù)據(jù)視覺，以數(shù)據(jù)為工具，以可視化為手段，目的

是描述真實(shí)，探索世界。

記4HMi妙場■工■??！?/p>

只

可

上，，史

??伊馬廿―

第4頁共37頁

1.2、為什么要可視化

我查閱了一些史料，發(fā)現(xiàn)幾個(gè)有意思的人。或許看完了他們的經(jīng)歷，我們就更深刻理解了為什么

要可視化？

第一個(gè)人：WilliamPlayfair（1759-1823）

威廉?普萊費(fèi)爾是蘇格蘭的工程師、政治經(jīng)濟(jì)學(xué)家。他生于1759年9月22日，當(dāng)時(shí)歐洲正處

于啟蒙運(yùn)動(dòng)時(shí)期，是藝術(shù)、科學(xué)、工業(yè)與商業(yè)的黃金發(fā)展時(shí)代。他是家里的第四個(gè)兒子，哥哥分別是

蘇格蘭著名建筑家、數(shù)學(xué)家。師從AndrewMeikle,脫粒機(jī)的發(fā)明者。

wiki百科上面說，他曾當(dāng)過：造水車木匠、工程師、繪圖員、會(huì)計(jì)、發(fā)明家、銀匠、商人、投資

經(jīng)紀(jì)人、經(jīng)濟(jì)學(xué)家、統(tǒng)計(jì)學(xué)家、小冊(cè)子作者、翻譯家、出版人、投機(jī)者、罪犯、銀行家、熱心的?；?/p>

黨人、編輯、敲詐者、記者。真是原諒我一生不羈放蕩愛跳槽??！但是他最著名的身份，是統(tǒng)計(jì)制圖

法的創(chuàng)始人。

他創(chuàng)造了世界上第一張有意義的線圖、柱圖、餅圖與面積圖。感覺看到這里很多分析師都要跪了,

這四種圖表類型應(yīng)該是直到現(xiàn)在都被頻繁使用的圖表類型了吧！

上圖是WilliamPlayfair繪制的條圖。出現(xiàn)在他主編的《商業(yè)與政治圖集》fCommercialandPolitical

Atlas?中。

右圖是1801年WilliamPlayfair在出版的《統(tǒng)計(jì)摘要》^Statistical

Breviary；中繪制的餅圖，世界上第一張大餅，闡述的是土耳其帝國

當(dāng)時(shí)在歐洲、非洲、亞洲占有的領(lǐng)土面積。

作為一個(gè)既懂統(tǒng)計(jì)學(xué)（身份：統(tǒng)計(jì)學(xué)家）、又富有游說技巧（身

份：熱心的?；庶h人、敲詐者、編輯、記者、出版人）、同時(shí)還有創(chuàng)

新精神（身份：發(fā)明家）、還會(huì)畫畫（身份：繪圖員）的人，被點(diǎn)亮

了一身的技能點(diǎn)，統(tǒng)計(jì)制圖法之父不是他，還能是誰？

當(dāng)然，這個(gè)人最重要的就是，他堅(jiān)信一圖表比數(shù)據(jù)表更有表現(xiàn)力。

第5頁共37頁

第二個(gè)人：FlorenceNightingale(1820-1910)

佛羅倫斯?南丁格爾出現(xiàn)在了數(shù)據(jù)可視化的文章中，

會(huì)不會(huì)有點(diǎn)怪呢？但是，如果你曾用過玫瑰圖，或者南丁

格爾圖，就應(yīng)該知道。

首先，它是以自己的締造者命名的。其次，那個(gè)南丁

格爾，就是''這個(gè)"南丁格爾??！

白衣天倭南丁格爾統(tǒng)計(jì)學(xué)家南丁格爾

在克里米亞戰(zhàn)爭期間，南丁格爾通過搜集數(shù)據(jù)，發(fā)現(xiàn)很多死亡原因并非是''戰(zhàn)死沙場"，而是因?yàn)?/p>

在戰(zhàn)場外感染了疾病，或是在戰(zhàn)場上受傷，卻沒有得到適當(dāng)?shù)淖o(hù)理而致死。為了解釋這個(gè)原因，并降

低英國士兵的死亡率，她繪制了這個(gè)著名的圖表，并與1858年遞到了維多利亞女王手中。一個(gè)切角

是一個(gè)月，其中面積最大的藍(lán)色塊，代表著因?yàn)榭深A(yù)防的疾病。

U1AGKAMvrrHuMORTALITY

『,?MAK4MXIMTMCARMYixIMCtAST5FWL2$

Mr8M*?

/?#f似小。，Me

/ArM?fU4?wA*tf9a.山

?Z?AM*TM*

A/tW4'?Hz4?，”.心，，/

n.4*s"，y.?AA^w?zy“＞，Ax&h，M，Mr/

棄.?Zr，?“》??3“》k/”??

A**,

這個(gè)圖表真的很厲害，為什么呢?

第一，它用面積直觀地表現(xiàn)出了一個(gè)時(shí)間段內(nèi)，幾種死因的占比，讓任何人杜能看懂;

第二，它還長的很漂亮，像一朵玫瑰花一樣；然后我們來想一想，它為什么要長的那么漂亮？因?yàn)檫@

張圖表的匯報(bào)對(duì)象以及最終的決策人是維多利亞女王！

南丁格爾的故事告訴我們：

數(shù)據(jù)可視化是為了更好地促進(jìn)行動(dòng)，所以要讓行動(dòng)的決策人看懂!

為此，耍盡心機(jī)在所不辭啊~

第6頁共37頁

第三個(gè)人：JohnSnow(1813-1858)

約翰?雪諾，看到這個(gè)名字，我本人也是虎軀一震。沒想到JohnSnow在數(shù)據(jù)可視化這塊也占了

一席之地。仔細(xì)研究了一下出生年月，才知道是自己想多了。

JohnSnow醫(yī)生是英國麻醉學(xué)家、流行病學(xué)家，曾經(jīng)當(dāng)過維多利亞女王的私人醫(yī)師，被認(rèn)為是麻

醉醫(yī)學(xué)和公共衛(wèi)生醫(yī)學(xué)的開拓者。1854年，倫敦西部西敏市蘇活區(qū)爆發(fā)霍亂，當(dāng)時(shí)許多醫(yī)生認(rèn)為霍

亂和天花是由''瘴氣"或從污水及其他不衛(wèi)生的東西中產(chǎn)生的有害物所引起的。然而，JohnSnow放

出了他的冰原狼，啊不，JohnSnow通過調(diào)查，證明了霍亂是由被糞便污染的水傳播的。

他將蘇活區(qū)的地圖與霍亂數(shù)據(jù)結(jié)合在一起，鎖定了霍亂的流行來源地——百老大街(BroadStreet)

水泵。隨即，他推薦幾種實(shí)用的預(yù)防措施，如清洗骯臟的衣被，洗手和將水燒開飲用等，取得了良好

的效果。那時(shí)候，沒有GIS,地圖都靠手繪，JohnSnow卻創(chuàng)造性地把數(shù)據(jù)與地圖結(jié)合在一起。

這充分說明了一件事：每一種圖表類型的誕生，都是由于明確而迫切的需要；所以當(dāng)你需要在已

知的圖表類型中進(jìn)行選擇時(shí)，先想想自己想要解決的到底是什么問題！

第四個(gè)人：CharlesJosephMinard(1781-1870)

第7頁共37頁

查爾斯?約瑟夫?米納德，這張圖相信很多人都見過了，被EdwardTufte認(rèn)為是史上最杰出的

統(tǒng)計(jì)圖。它的名字叫做0812-1813對(duì)俄戰(zhàn)爭中法國人力持續(xù)損失示意圖》，也被簡稱為《拿破侖行

軍圖》或《米納德的圖》，這張圖表描繪了拿破侖的軍隊(duì)自離開波蘭―俄羅斯邊界后，軍力損失的狀

況，在一張圖中，通過兩個(gè)維度，呈現(xiàn)了六種資料：拿破侖軍隊(duì)的人數(shù)、行軍距離、溫度、經(jīng)緯度、

移動(dòng)方向、以及時(shí)間一地域關(guān)系。

嗯，這種帶狀圖確實(shí)看起來眼熟。現(xiàn)在，大家更熟悉的帶狀圖表的名字叫做''桑基圖"，然而，它

比米納德的圖晚了30年，而且，只用于解釋能量的流動(dòng)。

但是，米納德的成就不光是一張行軍圖，他還是首個(gè)把餅圖與地圖結(jié)合在一起的人（右下圖），以及

在地圖上加流線（上圖）。

相傳，米納德的作品非常受歡迎，到什么程度呢？在米納德

的法文訃告中提到，1850?1860間，法國政府部門的首長希望在

自己的畫像中，出現(xiàn)米納德畫的圖表。

而米納德又教給我了什么？

盡管世界上已經(jīng)有了氧氣（餅圖）與氫氣（地圖），

但是，這并不意味著我們不能創(chuàng)造了啊~

為什么不學(xué)米納德，試試氧化氫呢~

第8頁共37頁

1.3、可視化的價(jià)值？

1.3.1、可視化讓讀者可以最迅速的理解數(shù)據(jù)所要傳達(dá)的信息

有研究表明，80%的人還記得他們所看到的，但只有20%的人記得他們閱讀的！數(shù)據(jù)可視化的

最重要的好處是它能夠幫助人們更快地理解數(shù)據(jù)。你可以在一個(gè)圖表中突出顯示一個(gè)大的數(shù)據(jù)量，并

且人們可以快速地發(fā)現(xiàn)關(guān)鍵點(diǎn)。在書面形式，它可能需要數(shù)小時(shí)來分析所有的數(shù)據(jù)及聯(lián)系。

數(shù)據(jù)的可視化展示，提高了解釋信息的能力。從海量的數(shù)據(jù)和信息中尋找聯(lián)系并不容易，但是圖形

和圖表可以在幾秒內(nèi)提供信息。一望便知，可提供所需的信息。為了更好地促進(jìn)行動(dòng)，所以要讓行動(dòng)

的決策人看懂！

30,079

昨日PV

21,825

環(huán)比V-21.73%

1.3.2、可視化使復(fù)雜數(shù)據(jù)更易懂、更加客觀、更具說服力。

通過策劃，設(shè)計(jì)，使復(fù)雜專業(yè)的東西變得簡單易懂，通過圖形展現(xiàn)復(fù)雜的數(shù)據(jù)。相比傳統(tǒng)的用表

格或文檔展現(xiàn)數(shù)據(jù)的方式，可視化能使數(shù)據(jù)更加客觀、更具說服力。在各類報(bào)表和說明性文件中，用

直觀的圖表展現(xiàn)數(shù)據(jù)，顯得簡潔、可靠。

第9頁共37頁

1.3.3、數(shù)據(jù)可視化不是簡單的把數(shù)字用圖表表示，而是就是幫助人，發(fā)現(xiàn)數(shù)據(jù)后的規(guī)律。

托勒密（約90年一168年）構(gòu)建出一個(gè)非常精妙的數(shù)學(xué)模型描述了宇宙星辰的運(yùn)行規(guī)律。托勒

密用地心說構(gòu)建了一個(gè)完美的數(shù)學(xué)模型。一一大圓上套入小圓。這正是擬合函數(shù)的思想。這個(gè)模型在

理論上站得住腳，加上他的數(shù)學(xué)水平很高，因此，他給出的具體的模型參數(shù)極為準(zhǔn)確，所預(yù)測的地球

運(yùn)行的周期，每100年的誤差不超過一天。這也是數(shù)據(jù)可視化。

1.3.4、大數(shù)據(jù)時(shí)代下的價(jià)值在于挖掘分析。

大數(shù)據(jù)時(shí)代背景下的可視化技術(shù)肯定不是在“單獨(dú)作戰(zhàn)”。一般數(shù)據(jù)可視化都是和數(shù)據(jù)分析功能

組合，數(shù)據(jù)分析又需要數(shù)據(jù)接入整合、數(shù)據(jù)處理、ETL等數(shù)據(jù)功能，發(fā)展成為一站式的大數(shù)據(jù)分析平

臺(tái)。

?化■工

?RMI可.y

人

MVM

THIN6;

m?■入征?值2

ROEmure奏

第10頁共37頁

1.4、可視化背后的關(guān)鍵

大家都知道設(shè)計(jì)有好壞之分。如果信息不是以正確的、恰當(dāng)?shù)姆绞匠尸F(xiàn)，則數(shù)據(jù)可視化的好處就

很容易被抵消一一具體的項(xiàng)目需要定制的方法。不管你的信息是什么，在利用可視化時(shí)有一些概念

你需要牢記。以下是贏取數(shù)據(jù)可視化技術(shù)背后的關(guān)鍵概念集合。

(1)了解聽眾

在展現(xiàn)數(shù)據(jù)之前，你需要做的第一件事就是了解誰將會(huì)看這些數(shù)據(jù)。了解你的聽眾是至關(guān)重要的，

以便用正確的方法來展現(xiàn)數(shù)據(jù)。

雖然數(shù)據(jù)可視化通常是一種簡化數(shù)據(jù)的方法，但觀眾對(duì)主題的知識(shí)層次千差萬別，需要好好做準(zhǔn)

備。如果你是針對(duì)一群專業(yè)的聽眾，那么可以使用更多的專業(yè)方法和專業(yè)術(shù)語來解釋數(shù)據(jù)。然而，對(duì)

于相同的數(shù)據(jù)，普通聽眾可能需要更為通俗的方法來解釋。

同樣，知道聽眾對(duì)你的數(shù)據(jù)有何期望也非常重要。你需要知道他們想要從數(shù)據(jù)中獲得什么關(guān)鍵點(diǎn)，

以及你展示數(shù)據(jù)的主要目的是什么。此外，還需要記住你展現(xiàn)數(shù)據(jù)的目的是什么。

(2)足夠理解數(shù)據(jù)

除了掌握目標(biāo)受眾外，你還需要對(duì)數(shù)據(jù)了如指掌。若是不正確地理解數(shù)據(jù)，則很有可能不能把信

息有效地傳達(dá)給聽眾。

然而你也無法顧及數(shù)據(jù)所包含的所有信息，所以要能夠提取關(guān)鍵的信息，并條理清晰地展現(xiàn)它們。

你還需要確保從數(shù)據(jù)中得到的關(guān)聯(lián)信息是正確而不是虛構(gòu)的一一決不能用錯(cuò)誤的數(shù)據(jù)做可視化！

如果你正確地理解了數(shù)據(jù)及其關(guān)聯(lián)，則可以從信息中得到獨(dú)特而有趣的數(shù)據(jù)關(guān)聯(lián)。

(3)講述一個(gè)故事

數(shù)據(jù)可視化還應(yīng)該描繪出一個(gè)故事。你一定不希望這些數(shù)據(jù)只是以一組信息的方式來展現(xiàn)，而是

能傳遞出數(shù)據(jù)使用背后的信息。這可以是不同的描述性介紹，或是為觀眾呈現(xiàn)一幅特定的圖像。

編造一個(gè)故事往往意味著觀眾從數(shù)據(jù)中獲得更多的洞察力。它可以幫助觀眾了解新的關(guān)聯(lián)和更深

入的信息。

事實(shí)上，數(shù)據(jù)可視化技術(shù)是一個(gè)出色的講故事工具?！耙粓D勝千言”這句話一點(diǎn)都不錯(cuò)，你應(yīng)該

發(fā)揮它的這項(xiàng)優(yōu)勢。通過數(shù)據(jù)來講故事并不困難，因?yàn)槟憧梢园杨伾⒆煮w和演示文稿都作為講故事

手法的一部分。

為了使數(shù)據(jù)可視化成功地融入故事，上述提到的理解數(shù)據(jù)則是至關(guān)重要的一點(diǎn)。

(4)保持簡潔

第11頁共37頁

近年來，數(shù)據(jù)可視化的發(fā)展很快，正如上面所示，涌現(xiàn)出很多工具和系統(tǒng)供人們使用。能接觸不

同的獨(dú)特方法并不意味著都要用到它們。而且，大量的數(shù)據(jù)也不意味著所有的信息都是必不可少的。

總之，保持你的數(shù)據(jù)可視化方法簡單明了。不必刻意地使用過多的數(shù)據(jù)或使用過多的技巧。

如果從講故事的角度來看，必須明白你所展現(xiàn)的每一個(gè)元素都是故事必不可少的一部分。如果數(shù)

據(jù)或元素，如某些事物的圖片，對(duì)故事的情節(jié)無關(guān)緊要，那么就不應(yīng)該把它加入進(jìn)來。

數(shù)據(jù)展示中包含太多的元素實(shí)際上會(huì)破壞最終的成品，與數(shù)據(jù)脫節(jié)。要記住數(shù)據(jù)可視化的核心之

處就是能在一瞬間呈現(xiàn)大量的數(shù)據(jù)。如果可視化顯得很費(fèi)勁，那么你就要回頭看看是否使用了錯(cuò)誤的

數(shù)據(jù)演示或包含了太多的信息。

(5)合理區(qū)分展現(xiàn)平臺(tái)

最后，贏取數(shù)據(jù)可視化技術(shù)也要了解技術(shù)方面。人們現(xiàn)在通過各種不同的平臺(tái)查看和訪問信息，

這一點(diǎn)必須牢記。就像需要知道目標(biāo)受眾一樣，你也需要考慮人們查看數(shù)據(jù)可視化的方式。

你的可視化結(jié)果要能輕松適應(yīng)多種平臺(tái)，如移動(dòng)設(shè)備，平板電腦或計(jì)算機(jī)。如果你的用戶只通過

手機(jī)瀏覽數(shù)據(jù)，那么適用于移動(dòng)端的展現(xiàn)方法自然會(huì)對(duì)你更有幫助，而不是針對(duì)筆記本的方法。

除了考慮平臺(tái)的界面選項(xiàng)外，還需要考慮可訪問性(accessibility)問題。如果數(shù)據(jù)可視化允許視

覺欠佳的人進(jìn)行適當(dāng)?shù)姆糯蠛涂s小，可以大大提高用戶體驗(yàn)。你也可以考慮為色盲人群提供不同顏色

選項(xiàng)。可訪問性旨在提高用戶體驗(yàn)，確保數(shù)據(jù)可視化可對(duì)所有人適用。

1.5、可視化需要避免的大錯(cuò)誤

數(shù)據(jù)可視化一詞，目前太泛濫，能做個(gè)圖表的似乎都叫數(shù)據(jù)可視化。優(yōu)秀的數(shù)據(jù)可視化講究場景

應(yīng)用，結(jié)合數(shù)據(jù)分析邏輯，制定高效決策。盡管以上關(guān)鍵方法能幫你生成贏取數(shù)據(jù)可視化的策略，還

有一些常見誤區(qū)要時(shí)刻警惕。

(1)錯(cuò)誤的信息

如上所述，數(shù)據(jù)的錯(cuò)誤是觀眾最厭惡的東西。你必須確保那些正在看你的數(shù)據(jù)的人獲取到的是正

確的數(shù)據(jù)。確保人們可以直接使用你圖表里的數(shù)據(jù)，而不必再次確認(rèn)數(shù)據(jù)正確性，這是你的職責(zé)。

(2)不完整的信息

除了保證信息正確之外，還要呈現(xiàn)完整的數(shù)據(jù)。人們必須能在其中找到相關(guān)信息，不能使用數(shù)據(jù)

可視化來欺騙或展現(xiàn)不完整的信息。

數(shù)據(jù)可視化能夠而且應(yīng)該講述一個(gè)故事，但故事需要包含完整和正確的信息，而不是只展示你認(rèn)

為合適的數(shù)據(jù)。

(3)過于簡化數(shù)據(jù)

第12頁共37頁

盡管要確保數(shù)據(jù)是以簡單的方式展現(xiàn)，這并不意味著你應(yīng)該簡化它。首先，你需要記住觀眾是誰，

對(duì)專業(yè)人士不要使用通俗和過于簡化的語言。而如果是普通的觀眾，就不要用專業(yè)術(shù)語來填充文字。

但除此之外，若是你未能清晰地展現(xiàn)數(shù)據(jù)，也就不能期望聽眾能清楚地了解它們之間的關(guān)系。不

能因?yàn)閷?duì)你來說鏈接似乎很明顯了，就省略部分信息，記住觀眾只能看到你所展示的這部分?jǐn)?shù)據(jù)，而

不是你所使用的完整數(shù)據(jù)集！

（4）不恰當(dāng)?shù)目梢暬?/p>

在展現(xiàn)數(shù)據(jù)時(shí)，你需要仔細(xì)思考數(shù)據(jù)展現(xiàn)的方式。如字體，顏色和圖像之類的屬性很總要。例如，

如果展示由特定疾病而導(dǎo)致死亡的信息時(shí)，使用鮮艷的色彩和令人愉快的圖像似乎不協(xié)調(diào)。

不適當(dāng)?shù)目梢暬舶ㄊ褂玫募夹g(shù)使得數(shù)據(jù)難以查看和理解。例如，你可能用泡泡來代表部門內(nèi)

不同的消費(fèi)水平，但如果泡泡的尺寸差異不合適，會(huì)導(dǎo)致誤判和不準(zhǔn)確的。

（5）遺漏標(biāo)注

過度簡化也可能導(dǎo)致缺乏標(biāo)注。當(dāng)你提供數(shù)據(jù)時(shí)，很容易假設(shè)觀眾己經(jīng)知道圖像的每一個(gè)方面代

表什么。但添加簡單的注釋可以提高用戶體驗(yàn)，并確保觀眾明白數(shù)據(jù)中的所有數(shù)據(jù)點(diǎn)。

舉一個(gè)例子，你可能用一個(gè)圖表來展示企業(yè)在過去十年自行車的銷量。如果數(shù)據(jù)圖表中有一個(gè)大

的起伏，用注釋解釋一下這個(gè)突變背后的原因，能確保觀眾掌握這一額外的信息。

2、當(dāng)前有關(guān)可視化技術(shù)的技術(shù)、設(shè)計(jì)、企業(yè)、案例等

2.1、當(dāng)前使用的可視化技術(shù)

有需求就有技術(shù)，后者說存在即合理，當(dāng)下對(duì)于不同的人群，大家用的數(shù)據(jù)可視化技術(shù)可謂千差

萬別。

有需求就有技術(shù)，后者說存在即合理，當(dāng)下對(duì)于不同的人群，大家用的數(shù)據(jù)可視化技術(shù)可謂千差

萬別。目前的主要用戶無非是兩類人，一類是業(yè)務(wù)分析及設(shè)計(jì)人員（產(chǎn)品部），一類是IT技術(shù)開發(fā)

人員（開發(fā)部）。對(duì)于業(yè)務(wù)人員，最麻煩的是工具的使用（推薦工具：Tableau）0

辦公室派；比啥說的，艮有Excel/PPT

只會(huì)皮毛的Al、PS、CoreMraw

R/SPSS/Gelphi等專業(yè)工具

各種圖形控件xxxCharts/xxxx.js

第13頁共37頁

對(duì)于技術(shù)開發(fā)人員最需要的技術(shù)的學(xué)習(xí)使用。下面我們主要介紹IT開發(fā)人員使用的可視化技術(shù)。

技術(shù)角度優(yōu)秀開源框架功能角度優(yōu)秀框架

HTML5CanvasEcharts、Leaflet圖表Echarts、highcharts、D3

SVGD3、highcharts地圖Leaflet、Mapbox、Openlayers

WebGLthree.js、Cesium、deck.gl三維Cesium>three.js、UE4、U3D

(1)HTML5Canvas

Canvas是html5出現(xiàn)的新標(biāo)簽，像所有的dom對(duì)象一樣它有自己本身的屬性、方法和事件。使

用canvas的基本方式是，使用js調(diào)用canvas的API繪圖。例如，繪制一段貝塞爾曲線，需要用寫

這樣一段javascript來生成：

functiondraw24(id){

varcanvas=document.getElemenrByld{id);

if(canvas=-=-null){

returnfalse;

_}

varcontext=canvas.gerContext("2dM);，U/..?i，會(huì)，',■<i'i"-'''-I1：■!\\1:\\..1'V.■)t'-'..!H1

context.moveTo(50z50);中—，

context.bezierCurveTo(50,50,150,50,150,150);//繪制貝店在曲線

context.stroke();Um

context.quadraticCurveTo(150,250,250,250);「二，?"上次H'長曲比

context.stroke();11

但是實(shí)際使用的時(shí)候我們通常不需要這樣直接調(diào)用API如同原生的javascriptAPI很繁瑣，調(diào)

用起來比較麻煩，于是有很多JS庫(如jquer等)將其封裝以方便使用，HTML5canvas也有相應(yīng)

的JS庫,最優(yōu)秀的良心產(chǎn)品是Echarts(htlp://echarls.baidu.com)和Leaflet

(http://leafletjs.com/)。

Echarts是一個(gè)由百度前端發(fā)起的canvas國產(chǎn)開源圖表類庫。這個(gè)echarts其實(shí)是在canvas類

庫zrender的基礎(chǔ)上做的主題圖庫，優(yōu)點(diǎn)有數(shù)據(jù)驅(qū)動(dòng)，圖例豐富，功能強(qiáng)大，支持?jǐn)?shù)據(jù)拖拽重計(jì)算，

數(shù)據(jù)區(qū)域漫游，全中文文檔非常過癮。

效果庫!?Ji???

當(dāng)高效，Leaflet同時(shí)支持Canvas或SVG進(jìn)行渲染地圖。

第14頁共37頁

除了Leaflet,當(dāng)然還有很多類同的開源組件,如：Mapbox、Openlayers、Maptalks>m叩V等

(2)SVG

關(guān)于SVG技術(shù)，在w女的定義如下：

@SVG指可伸縮矢量圖形(ScalableVectorGraphics)

?SVG用來定義用于網(wǎng)絡(luò)的基于矢量的圖形

?SVG使用XML格式定義圖形

@SVG圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有所損失

?SVG是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)

?SVG與諸如DOM和XSL之類的W3C標(biāo)準(zhǔn)是一個(gè)整體

SVG最大的優(yōu)點(diǎn)就是繪制和控制簡單。直接在html頁面里加入xml語句就可以編輯繪制。例如

下面的代碼就是畫一個(gè)圓、一個(gè)橢圓和一道黑線，把這段代碼另存為一個(gè)html文檔再用谷歌瀏覽器

打開就能看到效果了：

<html>

2<svg>

3<circlecx=,*25Mcy=M25"r="22Mfill="blue"stroke="gray"stroke-width='*2H/>

4<ellipsecx=n250"cy=r,250"rx-M100"ry=n200"fill="yellow”/〉

5<linexl-"0Nyl-M0Mx2="500"y2-M50Mstroke="black"/>

6</svg>

7</html>

跟前文中canvas繪圖的方式比一比，就知道SVG是多么容易控制了。當(dāng)然，使用SVG時(shí)我們通

常也是使用類庫來提升效率。這里的類庫主要有D3.js()和highcharts

(https:〃)

Highcharts是一個(gè)用純JavaScript編寫的一個(gè)圖表庫，能夠很簡單便捷的在web網(wǎng)站或是web

應(yīng)用程序添加有交互性的圖表，并且免費(fèi)提供給個(gè)人學(xué)習(xí)、個(gè)人網(wǎng)站和非商業(yè)用途使用。與國產(chǎn)的

Echarts功能上比較類同。

第15頁共37頁

D3的全稱是Data-DrivenDocuments（數(shù)據(jù)驅(qū)動(dòng)文檔），是應(yīng)用在web開發(fā)上的開源數(shù)據(jù)可視化

JS組件庫，D3只支持SVG,在github上關(guān)注數(shù)量超過了2萬人（超過了所有canvas類庫的關(guān)注數(shù)

量），是非常受歡迎的開源工具。使用d3的有開發(fā)者，有設(shè)計(jì)師，有藝術(shù)家，資料非常豐富（雖然

中文的很少）。

那么接著說說D3的優(yōu)缺點(diǎn)（基本上也就是SVG的優(yōu)缺點(diǎn)）：

優(yōu)點(diǎn)：

?D3最大的優(yōu)點(diǎn)在于其資料豐富，案例非常多。這是真的是一個(gè)極大的優(yōu)點(diǎn)。

@SVG矢量圖形的特點(diǎn)是無損縮放，這個(gè)優(yōu)勢在顯示2D圖形式會(huì)有非常好的效果，并且兼容各種分辨率。

?SVG圖形的節(jié)點(diǎn)可以像dom元素一樣控制，這就讓自主創(chuàng)作圖形變得更容易。相對(duì)于canvas這也是非常

大的優(yōu)勢。

缺點(diǎn)；

第16頁共37頁

?SVG是2D矢量圖，不能畫3D圖形。（用2D矢量可以畫很多帶透視效果的偽3D圖，那并不是真正的3D

圖?。?/p>

@d3.不支持IE6,7,8。如果想要正8使用d3,請(qǐng)用r2d3.js（一個(gè)結(jié)合了Raphael.js的擴(kuò)展庫）。Raphael.js

是一個(gè)跨瀏覽器的矢量圖形庫，它實(shí)現(xiàn)IE6,7,8兼容的方法是：在IE6,7,8中使用VML,在其他瀏覽

器中使用SVG。另外，如果圖形復(fù)雜，就不要指望用Raphael.js在IE上能跟D3畫出一樣酷炫的效果。

?SVG的節(jié)點(diǎn)都是對(duì)象，非常占用內(nèi)存。例如論壇里一個(gè)朋友使用d3繪制超過12000個(gè)節(jié)點(diǎn)的圖，直接導(dǎo)

致每個(gè)試圖打開它的瀏覽器都崩潰了。這個(gè)時(shí)候如果不愿意做簡化那么應(yīng)該試試canvas繪圖。

（3）WebGL

前面說的繪圖技術(shù)，無論canvas還是SVG都不能繪制3D圖形。我曾經(jīng)見過很多在網(wǎng)頁上顯示

3d圖形的方案，但都需要你的電腦上安裝相應(yīng)的插件（例如flash,silverlight）或者事先安裝虛擬

機(jī)（例如java）。之前曾經(jīng)有過很多web3D渲染技術(shù)，但不是要下插件，就是編程復(fù)雜，于是漸漸

被時(shí)代淘汰，例如VRML,約翰?卡馬克已經(jīng)宣布了它的死亡。難道就沒有一個(gè)開源的通用標(biāo)準(zhǔn)顯示

3D圖形嗎？當(dāng)然是有的。這貨叫WebGL,是一項(xiàng)使用JavaScript實(shí)現(xiàn)3D繪圖的技術(shù)，瀏覽器無需

插件支持，Web開發(fā)者直接使用js調(diào)用相關(guān)API就能借助系統(tǒng)顯卡（GPU）進(jìn)行編寫代碼從而呈現(xiàn)

3D場景和對(duì)象。

WebGL標(biāo)準(zhǔn)由科納斯組織（KhronosGroup）開發(fā)和維護(hù)，Google、Mozilla、Opera和Apple等

瀏覽器廠商都是其中的成員，為這一標(biāo)準(zhǔn)做出了顯著貢獻(xiàn)。從名稱上我們就可以知道WebGL跟

openGL肯定是小弟與大哥的關(guān)系。事實(shí)上webGL是基于OpenGLES2.0開發(fā)的，OpenGLES是

OpenGL三維圖形API的子集，針對(duì)手機(jī)、平板電腦和游戲主機(jī)等嵌入式設(shè)備而設(shè)計(jì)。瀏覽器內(nèi)核

通過對(duì)OpenGLAPI的封裝，實(shí)現(xiàn)了通過JavaScript調(diào)用3D的能力。WebGL內(nèi)容作為HTML5中

的Canvas標(biāo)簽的特殊上下文實(shí)現(xiàn)在瀏覽器中（這下canvas終于可以畫3D圖了，雖然用的是不同技

術(shù)）。

使用WebGL原生的API來寫3D程序是一件非常痛苦的事情，幸好，有很多同行花業(yè)余時(shí)間寫

了一些WebGL開源框架，目前最優(yōu)秀的就是three.js（https:〃threejs.orq）和Cesium

（https:〃）。

three.js是谷歌團(tuán)隊(duì)DataArts出品的基于webGL的3D場景庫。什么是threejs,很簡單，你將

它理解成three+js就可以了。three表示3D的意思，js表示javascript的意思。那么合起來，three.js

就是使用javascript來寫3D程序的意思。

第17頁共37頁

Cesium是一款面向GIS三維地球和地圖的，世界級(jí)的開源產(chǎn)品。它提供了基于JavaScript語言

的開發(fā)包，方便用戶快速搭建一款零插件跨平臺(tái)跨瀏覽器的虛擬地球Web應(yīng)用，并在性能，精度，

渲染質(zhì)量以及多平臺(tái)，易用性上都有高質(zhì)量的保證。

2.2、可視化大屏設(shè)計(jì)

可視化中的經(jīng)典應(yīng)用就是大屏了，所謂大屏，顧名思義就是一個(gè)很大很大的屏。

舉個(gè)例子，Dashboard可能大家有所了解，就是將一些業(yè)務(wù)的關(guān)鍵指標(biāo)以數(shù)據(jù)可視化的方式展示。

而大屏就是將Dashboard展示到一塊或多塊LED大屏上。經(jīng)常用在公司的展覽中心、老板的辦公室,

還有城市交通管控中心、交易大廳等等。一般怎么清楚怎么來，怎么酷炫怎么搞。譬如《人民的名義》

里就有這樣一幕：

第18頁共37頁

2.2.1、布局排版

大屏首先是要服務(wù)于業(yè)務(wù)，讓業(yè)務(wù)指標(biāo)和數(shù)據(jù)合理的展現(xiàn)。由于往往展現(xiàn)的是一個(gè)企業(yè)全局的業(yè)

務(wù)，一般分為主要指標(biāo)和次要指標(biāo)兩個(gè)層次，主要指標(biāo)反映核心業(yè)務(wù)，次要指標(biāo)用于進(jìn)一步闡述。所

以在制作時(shí)給予不一樣的側(cè)重。這里推薦幾種常見的版式。

上面幾個(gè)版式不是金科定律，只是通常推薦的主次分布版式，能讓信息一目了然。實(shí)際項(xiàng)目中，

不一定使用主次分布，也可以使用平均分布，或者可以二者結(jié)合進(jìn)行適當(dāng)調(diào)整。比如下圖所示，指標(biāo)

很多很多，存在多個(gè)層級(jí)的，就根據(jù)上面所說的基本原則進(jìn)行一些微調(diào)，效果會(huì)很好。

■助業(yè)髡指標(biāo)■助業(yè)務(wù)指標(biāo)

次要業(yè)務(wù)指標(biāo)修心業(yè)無瘠標(biāo)次竇業(yè)亮用標(biāo)

■助業(yè)務(wù)喻曲蛀努指標(biāo)

■助業(yè)旁端?助業(yè)者指標(biāo)

次賽業(yè)費(fèi)曬彼心業(yè)算指標(biāo)次鬟業(yè)務(wù)指標(biāo)

i「

■助業(yè)務(wù)指標(biāo)助業(yè)務(wù)指標(biāo)

第19頁共37頁

官網(wǎng)點(diǎn)擊熱力圉

附上典型的主次分布的大屏效果給大家看下，是不是看上去更加清晰呢，不會(huì)讓人有找不到重點(diǎn)

的感覺。

2.2.2、配色

合理的布局能讓業(yè)務(wù)內(nèi)容更富有層次，合理的配色能讓觀看者更舒適。配色的學(xué)問很復(fù)雜，這里

就先講一講背景色。背景色又分為整體背景以及單個(gè)元素的背景，無論是哪一個(gè)，都遵從兩點(diǎn)基本原

則：深色調(diào)&一致性。

之所以選擇深色調(diào)，主要是為了避免視覺刺激。參加過大型會(huì)議的童鞋應(yīng)該有感受，如果演示PPT

是淺色系的，投放到大屏上后會(huì)比較刺眼，尤其是前排童鞋簡直在遭罪受。下圖是兩個(gè)駕駛艙頁面深

淺色對(duì)比，看圖片也許看不出來，感興趣的可以找公司的大屏硬件測試測試，看看哪個(gè)更讓人眼睛看

著舒服。

第20頁共37頁

?科科2015年月蜃?&m況

各公司收入毛利

整體背景深色系，可選的余地還是很多的，但是配起來能讓多數(shù)人都覺得好看的還是以深藍(lán)色系

為主，如下所示是幾個(gè)推薦的配色方案。這幾個(gè)深色配色，是我們調(diào)研下來最常用的背景設(shè)置。大家

如果去網(wǎng)上搜羅好看的大屏或者駕駛艙頁面效果，很多都是這幾個(gè)色系里頭的。

R6G64B102R29G45B57R7G33B58R8G13B28R15G43B36

第21頁共37頁

當(dāng)然，背景不一定要用顏色的，也可以用圖片。圖片的使用依舊遵從整體深色的原則，同時(shí)搭配

其他一些現(xiàn)實(shí)特性可以讓整體看著更有科技感。推薦使用一些帶有星空、條紋、漸變線、點(diǎn)綴效果之

類的圖片。

單個(gè)元素的背景，首先是要和整體背景色系保持一致性，避免突兀。另外一個(gè)小技巧，就是透明

度的使用。根據(jù)實(shí)際項(xiàng)目經(jīng)驗(yàn)，這里極其推薦大家為單個(gè)的組件元素搭配一些透明色，透明度設(shè)置在

10%上下為宜，具體以實(shí)際效果微調(diào)。如下幾個(gè)模板，組件增加透明效果后，整體效果有質(zhì)的提升。

第22頁共37頁

2.2.3、點(diǎn)綴

細(xì)節(jié)影響感官體驗(yàn)，在大屏展現(xiàn)上，細(xì)節(jié)也會(huì)極大的影響整體效果。通過適當(dāng)給元素、標(biāo)題、數(shù)

字等添加一些諸如邊框、圖畫等在內(nèi)的點(diǎn)綴效果，能幫助提升整體美觀度。

如下圖所示銷售駕駛艙大屏，頂部的標(biāo)題通過左右兩個(gè)對(duì)稱線條進(jìn)行點(diǎn)綴，各個(gè)組件的細(xì)分標(biāo)題

通過不規(guī)則漸變色圖片進(jìn)行點(diǎn)綴，另外每個(gè)組件都搭配使用了簡潔的邊框以提升層次感。

比如下面圖所示大屏，給組件及其標(biāo)題增加一些不規(guī)則的漸變色邊框，讓整體看上去更富有科技

感。

第23頁共37頁

*fl**IAJMCQ

Ml

I.S?9*45446s

程序化、付理化?■M<s

L??"?》W?r<0V}fte?|MWftgK

?9?aiMt*口?8

GEA??爺AJUt

■三￡*(■■?■3.尸?gm

?.??/力om*K”a'at.

?"?C?73"■?tKrr.G.flM.尸■.MTA

tex<v?.奉〃

如下圖所示的航空大屏，給元素增加一些飛機(jī)圖標(biāo)、圖畫之類的擬物效果，讓大屏更真實(shí)生動(dòng)。

2.2.4、動(dòng)效

第24頁共37頁

動(dòng)效的范圍很廣，可以從很多角度解讀，最好的參照就是PPT的動(dòng)畫特效，比如前文所提的背景

動(dòng)畫、刷新的加載動(dòng)畫、輪播動(dòng)畫、圖表的閃爍動(dòng)畫、地圖的流向動(dòng)畫等等，都屬于動(dòng)態(tài)效果的范疇。

前文說過，動(dòng)效的增加能讓大屏看上去是活的，增加觀感體驗(yàn)。但過分的動(dòng)效極其容易喧賓奪主，讓

觀看者的眼球不知道往哪里聚焦，反而喪失了業(yè)務(wù)展現(xiàn)價(jià)值。這個(gè)度很難把握，既要平衡酷炫效果，

又要突出內(nèi)容。

列舉幾個(gè)制作的大屏動(dòng)態(tài)示例demo：

(1)下圖所示銷售大屏，核心指標(biāo)車輛總價(jià)值以數(shù)字顯示，動(dòng)態(tài)刷新數(shù)值。

(2)下圖所示IT運(yùn)維大屏，中間地圖上模擬的呼吸動(dòng)畫，底部的滾動(dòng)消息等。

(3)下圖所示金融大屏的輪播動(dòng)畫，借助輪播效果，來實(shí)現(xiàn)同一個(gè)位置滾動(dòng)播放不同的指標(biāo)內(nèi)容,

避免平鋪展開所有指標(biāo)把大屏界面擠滿。

第25頁共37頁

響應(yīng)速度超時(shí)預(yù)警當(dāng)天■育人ft當(dāng)天?低人數(shù)各類在線交朝a誤率頸瞥

(4)再比如這個(gè)銷售駕駛艙，通過邊框動(dòng)畫、流向動(dòng)畫，來增加大屏展示的整體活力。

2.2.5、總結(jié)

從布局、背景、點(diǎn)綴邊框、動(dòng)效等幾個(gè)方面，簡單介紹了一些大屏展現(xiàn)頁面制作的基本方法。其

實(shí)不難發(fā)現(xiàn)很多環(huán)節(jié)都是相通或交叉的，比如單個(gè)元素的背景色，往往會(huì)和一些邊框一起使用；比如

一些動(dòng)態(tài)效果，可能是背景或者邊框本身的GIF動(dòng)畫。

大屏展現(xiàn)作為數(shù)據(jù)可視化的一個(gè)典型使用場景，其涵蓋的知識(shí)太多太多了，一個(gè)完整的大屏項(xiàng)目

從開始調(diào)研到實(shí)施交付可能需要開發(fā)工程師、項(xiàng)目經(jīng)理、視覺工程師、UI工程師