可視化技術基礎知識

1、可視化技術闡述...........................................................................2

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

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

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

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

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

1.3、可視化的價值？...................................................................9

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

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

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

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

1.4、可視化背后的關鍵.................................................................11

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

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

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

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

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

1.5、可視化需要避免的大錯誤..........................................................12

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

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

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

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

(5)遺漏標注....................................................................13

2、當前有關可視化技術的技術、設計、企業(yè)、案例等.........................................13

2.1、當前使用的可視化技術.............................................................13

第1頁共37頁

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

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

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

2.2、可視化大屏設計...................................................................18

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

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

2.2.3、點綴.......................................................................23

2.2.4、動效.......................................................................24

2.2.5、總結.......................................................................26

2.3、當前可視化技術的企業(yè).............................................................27

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

(2)光啟元-騰訊27

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

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

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

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

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

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

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

3.2、技術選型.........................................................................37

第3頁共37頁

1、可視化技術闡述

L1、什么是可視化？

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

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

量。

有點晦澀么，我們換個方式解讀。如果你經常被領導批評PPT做得不好，我想你一定能夠理解這

句話“文不如表、表不如圖”，其實換位思考一下，假如你自己也做了領導，面對紛繁復雜的人、事

情況，應該也會對高度總結的圖表產生好感。無論如何，賞心悅目的圖確實比表格讓人心情好很多。

W?am??i?n*QH■

B

QT

?*Ml'ED

Ml-?m

?l>???“

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

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

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

復雜。為了有效地傳達思想概念，美學形式與功能需要齊頭并進，通過直觀地傳達關鍵的方面與特征，

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

第3頁共37頁

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

信息。

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

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

是描述真實，探索世界。

記4HMi妙場■工■?海■

只

可

上，，史

??伊馬廿―

第4頁共37頁

1.2、為什么要可視化

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

要可視化？

第一個人：WilliamPlayfair（1759-1823）

威廉?普萊費爾是蘇格蘭的工程師、政治經濟學家。他生于1759年9月22日，當時歐洲正處

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

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

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

經紀人、經濟學家、統(tǒng)計學家、小冊子作者、翻譯家、出版人、投機者、罪犯、銀行家、熱心的保皇

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

法的創(chuàng)始人。

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

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

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

Atlas?中。

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

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

當時在歐洲、非洲、亞洲占有的領土面積。

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

份：熱心的保皇黨人、敲詐者、編輯、記者、出版人）、同時還有創(chuàng)

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

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

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

第5頁共37頁

第二個人：FlorenceNightingale(1820-1910)

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

會不會有點怪呢？但是，如果你曾用過玫瑰圖，或者南丁

格爾圖，就應該知道。

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

格爾，就是''這個"南丁格爾啊！

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

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

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

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

是一個月，其中面積最大的藍色塊，代表著因為可預防的疾病。

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**,

這個圖表真的很厲害，為什么呢?

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

第二，它還長的很漂亮，像一朵玫瑰花一樣；然后我們來想一想，它為什么要長的那么漂亮？因為這

張圖表的匯報對象以及最終的決策人是維多利亞女王！

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

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

為此，耍盡心機在所不辭啊~

第6頁共37頁

第三個人：JohnSnow(1813-1858)

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

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

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

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

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

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

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

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

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

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

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

第四個人：CharlesJosephMinard(1781-1870)

第7頁共37頁

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

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

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

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

移動方向、以及時間一地域關系。

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

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

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

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

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

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

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

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

盡管世界上已經有了氧氣（餅圖）與氫氣（地圖），

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

為什么不學米納德，試試氧化氫呢~

第8頁共37頁

1.3、可視化的價值？

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

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

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

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

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

和圖表可以在幾秒內提供信息。一望便知，可提供所需的信息。為了更好地促進行動，所以要讓行動

的決策人看懂！

30,079

昨日PV

21,825

環(huán)比V-21.73%

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

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

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

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

第9頁共37頁

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

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

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

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

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

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

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

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

臺。

?化■工

?RMI可.y

人

MVM

THIN6;

m?■入征?值2

ROEmure奏

第10頁共37頁

1.4、可視化背后的關鍵

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

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

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

(1)了解聽眾

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

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

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

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

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

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

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

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

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

息有效地傳達給聽眾。

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

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

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

(3)講述一個故事

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

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

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

入的信息。

事實上，數(shù)據(jù)可視化技術是一個出色的講故事工具。“一圖勝千言”這句話一點都不錯，你應該

發(fā)揮它的這項優(yōu)勢。通過數(shù)據(jù)來講故事并不困難，因為你可以把顏色、字體和演示文稿都作為講故事

手法的一部分。

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

(4)保持簡潔

第11頁共37頁

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

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

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

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

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

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

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

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

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

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

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

你的可視化結果要能輕松適應多種平臺，如移動設備，平板電腦或計算機。如果你的用戶只通過

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

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

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

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

1.5、可視化需要避免的大錯誤

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

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

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

(1)錯誤的信息

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

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

(2)不完整的信息

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

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

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

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

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

第12頁共37頁

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

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

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

能因為對你來說鏈接似乎很明顯了，就省略部分信息，記住觀眾只能看到你所展示的這部分數(shù)據(jù)，而

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

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

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

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

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

不同的消費水平，但如果泡泡的尺寸差異不合適，會導致誤判和不準確的。

（5）遺漏標注

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

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

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

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

2、當前有關可視化技術的技術、設計、企業(yè)、案例等

2.1、當前使用的可視化技術

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

萬別。

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

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

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

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

只會皮毛的Al、PS、CoreMraw

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

各種圖形控件xxxCharts/xxxx.js

第13頁共37頁

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

技術角度優(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)的新標簽，像所有的dom對象一樣它有自己本身的屬性、方法和事件。使

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

這樣一段javascript來生成：

functiondraw24(id){

varcanvas=document.getElemenrByld{id);

if(canvas=-=-null){

returnfalse;

_}

varcontext=canvas.gerContext("2dM);，U/..?i，會，',■<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

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

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

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

(http://leafletjs.com/)。

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

庫zrender的基礎上做的主題圖庫，優(yōu)點有數(shù)據(jù)驅動，圖例豐富，功能強大，支持數(shù)據(jù)拖拽重計算，

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

效果庫!?Ji???

當高效，Leaflet同時支持Canvas或SVG進行渲染地圖。

第14頁共37頁

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

(2)SVG

關于SVG技術，在w女的定義如下：

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

?SVG用來定義用于網絡的基于矢量的圖形

?SVG使用XML格式定義圖形

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

?SVG是萬維網聯(lián)盟的標準

?SVG與諸如DOM和XSL之類的W3C標準是一個整體

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

下面的代碼就是畫一個圓、一個橢圓和一道黑線，把這段代碼另存為一個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是多么容易控制了。當然，使用SVG時我們通

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

(https:〃)

Highcharts是一個用純JavaScript編寫的一個圖表庫，能夠很簡單便捷的在web網站或是web

應用程序添加有交互性的圖表，并且免費提供給個人學習、個人網站和非商業(yè)用途使用。與國產的

Echarts功能上比較類同。

第15頁共37頁

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

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

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

中文的很少）。

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

優(yōu)點：

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

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

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

大的優(yōu)勢。

缺點；

第16頁共37頁

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

圖！）

@d3.不支持IE6,7,8。如果想要正8使用d3,請用r2d3.js（一個結合了Raphael.js的擴展庫）。Raphael.js

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

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

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

致每個試圖打開它的瀏覽器都崩潰了。這個時候如果不愿意做簡化那么應該試試canvas繪圖。

（3）WebGL

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

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

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

被時代淘汰，例如VRML,約翰?卡馬克已經宣布了它的死亡。難道就沒有一個開源的通用標準顯示

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

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

3D場景和對象。

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

瀏覽器廠商都是其中的成員，為這一標準做出了顯著貢獻。從名稱上我們就可以知道WebGL跟

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

OpenGL三維圖形API的子集，針對手機、平板電腦和游戲主機等嵌入式設備而設計。瀏覽器內核

通過對OpenGLAPI的封裝，實現(xiàn)了通過JavaScript調用3D的能力。WebGL內容作為HTML5中

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

術）。

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

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

（https:〃）。

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

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

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

第17頁共37頁

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

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

渲染質量以及多平臺，易用性上都有高質量的保證。

2.2、可視化大屏設計

可視化中的經典應用就是大屏了，所謂大屏，顧名思義就是一個很大很大的屏。

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

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

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

里就有這樣一幕：

第18頁共37頁

2.2.1、布局排版

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

務，一般分為主要指標和次要指標兩個層次，主要指標反映核心業(yè)務，次要指標用于進一步闡述。所

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

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

不一定使用主次分布，也可以使用平均分布，或者可以二者結合進行適當調整。比如下圖所示，指標

很多很多，存在多個層級的，就根據(jù)上面所說的基本原則進行一些微調，效果會很好。

■助業(yè)髡指標■助業(yè)務指標

次要業(yè)務指標修心業(yè)無瘠標次竇業(yè)亮用標

■助業(yè)務喻曲蛀努指標

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

次賽業(yè)費曬彼心業(yè)算指標次鬟業(yè)務指標

i「

■助業(yè)務指標助業(yè)務指標

第19頁共37頁

官網點擊熱力圉

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

的感覺。

2.2.2、配色

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

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

則：深色調&一致性。

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

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

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

著舒服。

第20頁共37頁

?科科2015年月蜃?&m況

各公司收入毛利

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

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

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

R6G64B102R29G45B57R7G33B58R8G13B28R15G43B36

第21頁共37頁

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

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

類的圖片。

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

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

10%上下為宜，具體以實際效果微調。如下幾個模板，組件增加透明效果后，整體效果有質的提升。

第22頁共37頁

2.2.3、點綴

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

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

如下圖所示銷售駕駛艙大屏，頂部的標題通過左右兩個對稱線條進行點綴，各個組件的細分標題

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

比如下面圖所示大屏，給組件及其標題增加一些不規(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?.奉〃

如下圖所示的航空大屏，給元素增加一些飛機圖標、圖畫之類的擬物效果，讓大屏更真實生動。

2.2.4、動效

第24頁共37頁

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

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

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

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

又要突出內容。

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

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

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

(3)下圖所示金融大屏的輪播動畫，借助輪播效果，來實現(xiàn)同一個位置滾動播放不同的指標內容,

避免平鋪展開所有指標把大屏界面擠滿。

第25頁共37頁

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

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

2.2.5、總結

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

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

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

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

從開始調研到實施交付可能需要開發(fā)工程師、項目經理、視覺工程師、UI工程師