現(xiàn)如今無論是工作匯報，產(chǎn)品設(shè)計，后臺設(shè)計甚至是數(shù)據(jù)大屏，越來越多的設(shè)計師需要和數(shù)據(jù)打交道。尤其是想要做B端的設(shè)計師，數(shù)據(jù)可視化更是必不可少的一個技能。數(shù)據(jù)可視化，可謂是越來越體現(xiàn)一個設(shè)計師的專業(yè)能力。

因此掌握數(shù)據(jù)可視化能力，是面向未來的設(shè)計師所必備的能力。然而尷尬的是，國內(nèi)沒有一款針對于教學(xué)數(shù)據(jù)可視化的全套解決方案，這讓很多渴望學(xué)習(xí)的設(shè)計師摸不著頭腦。所以這也促使我開啟了這個系列――「設(shè)計師需要了解的數(shù)據(jù)可視化」，希望能夠給大家?guī)硪恍┎灰粯拥膬?nèi)容，為大家梳理一個完整的數(shù)據(jù)可視化框架。

今天帶來的就是這個系列的第一篇，數(shù)據(jù)可視化的概念以及數(shù)據(jù)可視化設(shè)計的基本準(zhǔn)則。最近一直在做國際外包，時間非常的零散，而寫邏輯性強(qiáng)的文章又非常耗費(fèi)精力。所以從開題到現(xiàn)在，用了將近2個月的時間才將這篇文章徹底收尾。全文總計25000字左右，閱讀需要20分鐘左右，干貨滿滿，請大家做好準(zhǔn)備。（如果沒有時間，我之后我也會將該內(nèi)容錄成音頻，如果有興趣，可以持續(xù)關(guān)注我）

什么是數(shù)據(jù)可視化

數(shù)據(jù)可視化就是借助視覺的表達(dá)方式（不局限于文字），將枯燥的，專業(yè)的，不直觀的數(shù)據(jù)內(nèi)容，有趣的、淺顯的、直觀的傳達(dá)給觀眾的一種手段。

非設(shè)計師在制作數(shù)據(jù)可視化時，往往會因為重點突出數(shù)據(jù)的重要性，而讓可視化圖表變得枯燥乏味。而設(shè)計師在制作數(shù)據(jù)可視化時，又會因為過度注重絢麗多彩而讓數(shù)據(jù)的呈現(xiàn)效果大打折扣。所以在這種大環(huán)境下，催生出了數(shù)據(jù)可視化行業(yè)。作為設(shè)計師，如何擁抱這個新興的行業(yè)，如何把握設(shè)計與功能之間的平衡，從而更好的溝通與傳達(dá)信息，即是本文的重點。

信息圖表的分類

根據(jù)木村博之的定義，從視覺表現(xiàn)形式的角度，將「信息圖表」的呈現(xiàn)方式分為六大類：圖解(Diagram)、圖表(Chart)、表格(Table)、統(tǒng)計圖(Graph)、地圖(Map)、圖形符號(Pictogram)。

1. 圖解—主要運(yùn)用插圖對事物進(jìn)行說明

文字有時候是一種匱乏的信息傳遞方式，而可視化的方式，則是人類最本源的一種信息傳遞方式，圖解就是將很多無法準(zhǔn)確或用語言傳達(dá)的內(nèi)容，以生動形象的圖形解釋出來。下圖是一張經(jīng)典的對于咖啡種類圖解，38種咖啡配方，不必要用多余的文字解釋，直接用圖解表示，簡單明了，清晰易懂。

2. 圖表—運(yùn)用圖形、線條及插圖等，闡述事物的相關(guān)關(guān)系

圖表通常用于簡化人們對于大量數(shù)據(jù)之間的關(guān)系的理解。人們通常理解圖表會比理解數(shù)據(jù)要快很多。圖表和圖解唯一的不同點在于，圖解是用可視化的方式去傳遞信息，而圖表則是用來去闡述信息之間的邏輯關(guān)系。流程圖就是典型的圖表。

下圖是一張寵物狗的進(jìn)化圖，用巧妙的方式清晰地向我們傳遞了，狼是如何被人類馴化成不同種類的寵物狗的。

4. 統(tǒng)計圖—通過數(shù)值來表現(xiàn)變化趨勢或者進(jìn)行比較

統(tǒng)計圖是根據(jù)統(tǒng)計數(shù)字，用 幾何圖形 、事物形象和地圖等繪制的各種圖形。它具有 直觀 、 形象 、 生動 、 具體 等特點。統(tǒng)計圖可以使復(fù)雜的統(tǒng)計數(shù)字簡單化、通俗化、形象化，使人一目了然，便于理解和比較。因此，統(tǒng)計圖在統(tǒng)計 資料整理 與分析中占有重要地位，并得到廣泛應(yīng)用。

下圖是大城市通勤的時長統(tǒng)計，通過這些柱狀圖，我們能很清晰的看出各個級別的城市通勤時長的比例關(guān)系，并了解他們的擁堵時長和非擁堵時長分別是怎樣的情況。

5. 地圖—描述在特定區(qū)域和空間里的位置關(guān)系

將真實的世界轉(zhuǎn)換為平面，在此過程中必然要講一些東西略去。實際上，要說「省略」是地圖上最關(guān)鍵的詞也不為過，無論是哪種信息地圖，最重要的是讓用戶找到想要看到的信息。

信息地圖也可分為兩大類：

第一類，將整個區(qū)域的布局或結(jié)構(gòu)完整呈現(xiàn)的地圖。

第二類，將特定對象突出顯示的地圖。

以下是美國各州擁有槍支人數(shù)占總?cè)藬?shù)的百分比統(tǒng)計圖。

6. 圖形符號—不使用文字，直接用圖畫傳達(dá)信息

所謂圖形符號（也就是我們常說的icon），基本就是通過易于理解、與人直覺相符的圖形傳達(dá)信息的一種形式。生活中處處存在圖形符號，包括地鐵站出入口上的地鐵標(biāo)識，路邊的指示牌與限速標(biāo)識。人們會約定俗成的運(yùn)用一些符號來代表一些固定的意思，比如廁所門口的男女標(biāo)識，很多商店為了個性化設(shè)計，使用了不常用的符號來表示男女，這會給消費(fèi)者造成很大的困擾，因為這脫離了他們常見的理解范圍。

圖形符號的設(shè)計原則是盡可能不使用文字，其作用有兩條：

避免語言不通造成的困擾。

更便捷的、更清晰的傳遞信息。

多年來，最經(jīng)典的圖形符號應(yīng)用案例可以說是奧運(yùn)會和殘奧會的運(yùn)動圖標(biāo)了。圖形符號可以說已經(jīng)成為奧運(yùn)會和殘奧會的重要組成部分，就像火炬?zhèn)鬟f和運(yùn)動會LOGO一樣，從賽事門票到奧運(yùn)村的品牌，圖形符號都在被廣泛使用。

下圖即為東京奧運(yùn)會的運(yùn)動圖形符號（局部）

達(dá)到數(shù)據(jù)可視化目標(biāo)的基本方法

目前我們工作中經(jīng)常遇到的數(shù)據(jù)可視化，大多數(shù)是制作數(shù)據(jù)圖表（即統(tǒng)計圖 Graph），所以我們本文的主要教學(xué)內(nèi)容也是圍繞著如何制作統(tǒng)計圖來說。

制作統(tǒng)計圖的過程可以被四個步驟，分別是：明確目的、選擇圖表、視覺設(shè)計、突出信息。

明確目的：明確數(shù)據(jù)可視化的目標(biāo)，通過數(shù)據(jù)可視化我們要解決什么樣的問題，需要探索什么內(nèi)容或陳述什么事實，并選擇合適的圖表。

選擇圖表：圍繞目標(biāo)找到能提供信息的指標(biāo)或者數(shù)據(jù)，選擇合適的圖形去展示需要可視化的數(shù)據(jù)。

視覺設(shè)計：以可視化的手段將數(shù)據(jù)轉(zhuǎn)化成有趣的設(shè)計語言。

突出信息：根據(jù)可視化展示目標(biāo)，將重要信息添加輔助線或更改顏色等手段，進(jìn)行信息的凸顯，將用戶的注意力引向關(guān)鍵信息，幫助用戶理解數(shù)據(jù)意義。

1. 明確目的

大多數(shù)情況，明確圖表本身要達(dá)到的目的，比制作好圖表本身更加重要。如果對數(shù)據(jù)認(rèn)識不清，就會造成2種結(jié)果：

無法擬定合適的圖表標(biāo)題，從而使讀者失去閱讀圖表的興趣。

無法選擇出正確的可視化方式，從而使圖表難以理解。

知識點 01：好的圖表標(biāo)題 ―― 等于成功的一半

大多數(shù)圖表都需要一個好的標(biāo)題，這樣才能讓面試官知道他們在看什么。

標(biāo)題應(yīng)該是一個結(jié)論，是你希望面試官從中獲得的信息（有意義并且有趣的部分），而不僅僅是對圖表展示內(nèi)容的概括（即無意義且無趣的部分）。

所以作為新手的我們，只要能熟練掌握這六種圖表，即可應(yīng)付大部分的使用場景，而對于我們這種更專業(yè)的人士來說，上述的「圖表選擇器」能夠大大提高我們的工作效率。

3. 視覺設(shè)計

接下來也是數(shù)據(jù)可視化中最重要的一步，視覺設(shè)計。很多時候我們在設(shè)計圖表時沒有既定的規(guī)則，全憑借在平面設(shè)計和UI設(shè)計中獲得的知識來進(jìn)行設(shè)計。但之所以數(shù)據(jù)可視化被單獨細(xì)化成一個類別，并在國外蓬勃發(fā)展，甚至衍生出了專業(yè)的數(shù)據(jù)可視化設(shè)計師，就證明在數(shù)據(jù)可視化領(lǐng)域，很多規(guī)則是與其他設(shè)計不同的。

一個最簡單的例子，市面上大多數(shù)的配色方案都在數(shù)據(jù)可視化領(lǐng)域不適用。

毫無包容性的配色方案

首先，適用于數(shù)據(jù)可視化的配色方案，一定在明度上是有變化的。很多配色方案不僅不具備這種特性，甚至不會考慮包容性。UI設(shè)計的配色方案看起來都很絢麗多彩，但是很明顯，他們是為了用戶界面而設(shè)計的。色盲人士往往很難去閱讀那些運(yùn)用了低包容性配色方案的可視化圖表。

沒有足夠多的顏色種類

另一個問題就是，大多數(shù)配色方案并沒有足夠多的顏色種類。

在構(gòu)建一套完整的可視化圖表時，我們往往至少需要6種顏色的調(diào)色板來進(jìn)行設(shè)計，我們見過的大多數(shù)配色方案并不具有這么多種顏色。

雖然這些配色方案同樣絢麗多彩，但是他們不能靈活應(yīng)對圖表中復(fù)雜的信息層級。

難以區(qū)分層級的配色方案

漸變配色方案可以輕松解決上述兩個問題（顏色之間有明顯的對比，且可以無限細(xì)分顏色種類）。但很抱歉，這樣的配色方案同樣不適用數(shù)據(jù)可視化，我們舉一些簡單的例子大家就可以明白。

你能區(qū)分出最左邊的4個顏色之間有什么差別嗎？恐怕很難。

前面的闡述，大多數(shù)是為了讓大家對數(shù)據(jù)可視化有一個清晰的概念。在「視覺設(shè)計」這一章我將重點講解，數(shù)據(jù)可視化（即圖表制作時）需要注意的設(shè)計準(zhǔn)則。下面的內(nèi)容主要解決大家在數(shù)據(jù)可視化中所遇到的三個問題。

如何制作數(shù)據(jù)可視化圖表？

如何快速的制作數(shù)據(jù)可視化圖表？

如何制作一份兼具實用性和美觀性的數(shù)據(jù)可視化圖表？

適用于所有圖表的制作規(guī)則

1. 圖表中的線條

有無刻度線

當(dāng)數(shù)據(jù)的數(shù)值非常重要時，一定要使用刻度線來讓觀眾更清晰的了解數(shù)據(jù)。

如果你的聽眾只需要了解A數(shù)據(jù)大于B數(shù)據(jù)，那么刻度線是沒有必要的，只需在坐標(biāo)軸上使用小刻度即可。如果你的讀者要花一些時間在柱狀圖上并感興趣A數(shù)據(jù)是45.65而B數(shù)據(jù)是37.66，那么使用刻度線將有助于他們理解。

2. 選擇合適的坐標(biāo)上下限

選擇合適的坐標(biāo)下限

一般來講，我們應(yīng)該把我們的坐標(biāo)下限設(shè)置為0。

有人會問，這樣的話我們的數(shù)據(jù)就會變得沒有那么起伏變化了。那可能是因為你的數(shù)據(jù)本身就沒有那么長勢喜人。

但同樣，其實很多事情可以反過來思考，之所以有人愿意不把坐標(biāo)軸設(shè)定為0為起點，其實就是為了在視覺上讓人形成對比強(qiáng)烈的感覺，從而突出業(yè)績。這種方法的使用因人而異。

比如在小米的發(fā)布會中，為了對比，小米把數(shù)據(jù)的下限起點設(shè)置為了10000，從而使小米的跑分?jǐn)?shù)據(jù)看似跑贏了友商一倍還多，但其實小米的數(shù)據(jù)增長，只比友商高出了25%。

再舉個例子：這張條形圖也是經(jīng)?？怂剐侣劀?zhǔn)許使用的。

這也同時提醒我們要注意，在觀看別人的圖表時，僅僅觀看柱狀圖的高低趨勢往往不能得出正確結(jié)論，需要注意坐標(biāo)軸起始位置有沒有被人做過虛假處理。

同樣的，有些人為了匯報業(yè)績，也會使每個刻度的跨度不一致，從而提高柱狀圖整體的對比度。這種情況也應(yīng)該多留心觀察，不要被表面的內(nèi)容所迷惑。

3. 刻度值

雖然Y軸的刻度值標(biāo)簽通常放置在刻度線的最左邊，但我們也可以把它們放置在其他的地方，比如刻度線的頂部。（但此時一定要把握好親密性原則，稍不注意就會引起觀眾的困惑，這也是我們經(jīng)常會在看其他圖表時遇到的問題，到底刻度值標(biāo)記的是哪一條刻度線？）

在坐標(biāo)軸上應(yīng)該使用均勻的跨度0,5,10,15,20，而非不均勻的跨度0,3,5,16,50。這里即呼應(yīng)上方「坐標(biāo)軸下限」中的最后一點，有時圖表制作人也會用不均勻的刻度來蒙騙我們對數(shù)據(jù)產(chǎn)生誤解。

當(dāng)然，此處的舉例只是夸大了錯誤的效果，現(xiàn)實生活中的不均勻刻度往往更加隱蔽，需要我們仔細(xì)去甄別。

不要使用非水平和豎直的文字標(biāo)注，也不要使用轉(zhuǎn)行

有時坐標(biāo)軸上的注釋文字會很多，所以很多人為了妥協(xié)，在小空間內(nèi)顯示出所有的文字標(biāo)注內(nèi)容，而使用傾斜的文本，或者將文本轉(zhuǎn)行處理。

不要用過于復(fù)雜的設(shè)計形式，數(shù)據(jù)可視化的第一要義是簡單易懂，所以在遇到標(biāo)簽文字過長時，可以采用以下方法進(jìn)行解決。

刻意的序列

在發(fā)布會中我們常常見到，為了突出自己產(chǎn)品的強(qiáng)悍，往往要與友商的數(shù)據(jù)做對比，在這種情況下，我們的數(shù)據(jù)也不是隨機(jī)排布的，我給這種數(shù)據(jù)排布方法起了個名字，叫「刻意的序列」。

在 魅族 16th 的發(fā)布會中，這張旗艦機(jī)重量對比的圖表很有講究，可以發(fā)現(xiàn)，除了索尼（最重的手機(jī)）以及 魅族 16th（最輕的手機(jī)）外，其余所有的手機(jī)都是按照降序排列。不看顏色對比，把 236g 的索尼和 152g 的魅族放置在一起進(jìn)行講解，以更加突出魅族的輕薄。

那么這個圖表的數(shù)據(jù)排序其實經(jīng)過了三次處理。

把重量從高到低排序。

把重量最高的和的手機(jī)單獨放置，并給予特殊顏色單獨顯示。

把這兩個數(shù)據(jù)放置在最后，再次突出對比，吸引觀眾注意。

這就是我們學(xué)習(xí)數(shù)據(jù)可視化時非常需要注意的細(xì)節(jié)點，在數(shù)據(jù)可視化中，細(xì)節(jié)決定成敗。

5. 關(guān)于圖例的設(shè)計

數(shù)字需要四舍五入

我們有時為了保證圖表的清晰整潔，并不能完全選擇符合數(shù)據(jù)上限和下限的數(shù)字作為刻度，而是選擇一些取整的數(shù)字。

同樣的，這不僅僅適用于圖例中的數(shù)字，同樣適用于坐標(biāo)軸上下限的數(shù)字。

刪除內(nèi)部邊界

有時我們甚至可以更簡約的表示圖例，當(dāng)你只想表達(dá)一個漸進(jìn)的過程，24和55之間的差異并不重要，觀眾只需要知道后者比前者大即可。在這種情況下，我們可以嘗試只標(biāo)記出圖例的最大值和最小值，而不必要標(biāo)記出每個邊界或者顏色，這樣可以給觀眾減少不必要的信息負(fù)擔(dān)。

6. 圖表上的文字信息

文字標(biāo)注的作用，不是來填充空白的，而是用來強(qiáng)調(diào)相關(guān)信息或拓展額外的背景知識的。

引用消息來源

大多數(shù)情況下，我們制作的圖表都不會將原數(shù)據(jù)附在旁邊，因此最好在圖表中引用你的數(shù)據(jù)來源。一般來說，引用規(guī)則是在左下角防止數(shù)據(jù)來源信息，往往采用特殊字體

通常來說，不需要太嚴(yán)謹(jǐn)?shù)膱D表，我們會對數(shù)據(jù)值進(jìn)行一定程度的處理。

有小數(shù)的值四舍五入。(234.19 ―― 234)

在數(shù)據(jù)的量級非常大時，將一定位數(shù)數(shù)字取整。（52,133 ―― 52,000)

當(dāng)所有數(shù)據(jù)的量級都非常大時，將一定位數(shù)的數(shù)字縮進(jìn)單位中。（521,000,000 元 ―― 5.21 億元）

Y軸刻度值盡量轉(zhuǎn)化為千位分隔符，如K，M，B。

Y軸最大值取值要恰當(dāng)，保證圖表占據(jù)2/3以上。

如果我們不這樣處理，你就會發(fā)現(xiàn)你的圖表總是不那么整潔。

7. 控制字體的數(shù)量

圖表中的字體數(shù)量以及字體大小的種類加起來不要超過3種（標(biāo)題和副標(biāo)題除外）。通常來說，我們在制作時會把注釋和坐標(biāo)軸標(biāo)簽設(shè)置為兩種字體樣式，所以只需要確保將這兩者統(tǒng)一起來，那么就可以保證我們的圖表不超過3種字體樣式。

過寬的柱會讓圖表看起來笨重，盡量保持柱的輕薄，這樣可以保持優(yōu)雅的外觀，但是太薄了會讓用戶很難對數(shù)據(jù)進(jìn)行比較。

標(biāo)準(zhǔn)的數(shù)值為，柱的寬度為「柱與柱間距」的2倍，當(dāng)然這只是個參考值，實際我們根據(jù)不同的情況，對寬度作出調(diào)整。

2. 盡量不要超過7個值

一般進(jìn)行數(shù)據(jù)比較時，柱狀圖建議不要超過5個數(shù)據(jù)值，對于條形圖來說，建議不要超過7個數(shù)據(jù)值。

折線圖的制作規(guī)范

1. 有層次區(qū)分的折線/曲線

當(dāng)我們在制作一個復(fù)雜的折線圖時，我們想要顯示其中的一條數(shù)據(jù)，最好的方法就是加強(qiáng)它與其他元素的對比，從而提高它的重要性層級。

利用我們之前的方法，把其他的數(shù)據(jù)變?yōu)榛疑?

將我們需要強(qiáng)調(diào)的曲線置于頂層。

2. 什么時候是用折線圖

2017年1月和2月的大米出口量是相關(guān)的，他們代表一種數(shù)據(jù)在不同時間下的數(shù)據(jù)值，因此我們可以用折線圖將它們連接起來。但是2017年1月的大米出口量和玉米出口量（16萬噸）是不相關(guān)的，所以我們不能隨便用折線圖來代替柱狀圖。

用折線圖可以很好的表示每天去醫(yī)院的人數(shù)，因為統(tǒng)計每天去醫(yī)院的人數(shù)可以用來觀察趨勢。

3. 按照時間推進(jìn)的數(shù)據(jù)并不能總是用折線圖來表示

有時我們也需要進(jìn)行一些區(qū)分。如果我們想要繪制美國大規(guī)模槍擊事件的傷亡人數(shù)隨時間推移的圖表。這些槍擊事件確實是一個接一個發(fā)生的，但是它們本質(zhì)上卻沒有關(guān)系，所以你不能用折線圖（應(yīng)該用條形圖）。

但是，如果按年份對它們進(jìn)行歸類，并計算每年的傷亡人數(shù)。這樣的情況下可以使用折線圖進(jìn)行統(tǒng)計，因為統(tǒng)計結(jié)果的趨勢變化是有意義的，是可以得出相應(yīng)的結(jié)論的。

4. 使鋸齒狀的線條平滑

如果你的折線上下浮動過于劇烈，那么你應(yīng)該嘗試?yán)L時間間隔，比如不每天采樣而以周為單位來采樣。觀眾們不會去閱讀鋸齒狀的線條，或者說他們不會喜歡這樣的圖表。

5. 在你的折線圖中繪制數(shù)據(jù)點

當(dāng)有些特定的數(shù)值特別重要時，我們可以在線條上標(biāo)注出他們，如果你有大量的數(shù)據(jù)需要展示，或者你只想展示數(shù)據(jù)的走勢，那么其實你只需要使用折線就足夠了，不需要增加數(shù)據(jù)點。不信你可以試試，大量的數(shù)據(jù)點 = 混亂不堪的界面。

餅圖的制作規(guī)范

餅圖和圓環(huán)圖在數(shù)據(jù)可視化方面生病狼藉，但卻是使用的最頻繁的圖表之一。餅圖是一種應(yīng)該避免使用的圖表，因為肉眼對面積大小不敏感，并且?guī)缀鯖]有對與角度大小的概念。更何況是肉眼完全無法重合比較的圖形。

例如上面左圖，我們很難去比較每日從肉類（Meat）中攝入的卡路里與從糖類（Sugar&Fat）中攝入的卡路里數(shù)量的比例。人眼的直覺中，糖類與肉類的比例應(yīng)該在2：1左右，但實際的比例卻是1.5：1。

上述右圖將這一現(xiàn)象放大的更加明顯。人眼的直覺中，辦公與接待的數(shù)值差距非常大（這是由于我們直覺更習(xí)慣從面積上做判斷），但實際上接待與辦公的比例為1.5：1。

很多設(shè)計師認(rèn)為餅圖應(yīng)該是被禁止使用的圖表，我覺得不能說的太絕對，不管怎樣，迄今為止事實情況是，仍然有很多人在使用餅圖，所以我們至少可以爭取正確的使用他們。

雖然如此，但是在強(qiáng)調(diào)個體與總體的比例關(guān)系方面，餅圖還是有其獨特的優(yōu)勢。

1. 避免過度分割餅圖，否則最終會導(dǎo)致根本無法閱讀

那么有同學(xué)會問：分割多少塊是過度分割？這是一個需要在實際制作時進(jìn)行判斷的問題。一個簡單的方法，如果我們已經(jīng)很難從圖中看出其中一塊扇形是另一塊的兩倍大了，或者好幾塊較小的扇形看起來差不多大時，那么就不能再分割了。此時可以考慮把較小的類目歸入一個更大的：「其他」模塊。

如果一定要給出一個確切的分類數(shù)目，我認(rèn)為一般不要超過9個，超過的話，建議用條形圖來展示，不要太依賴于餅圖。

例：這張餅圖來自維基百科，它展示了國家的不同區(qū)域。

左邊這張餅圖已經(jīng)分割出了無數(shù)個扇形了，但旁邊另分離出一張餅圖，顯示出了左圖中更多的，看不到的更小國家的情況，以此來提供更多的信息。其實還有很多的方法可以展示這組數(shù)據(jù)，例如樹狀圖或者普通的地圖。局限較大的餅圖只適用于展示只有幾組值的數(shù)據(jù)。

除餅圖外，環(huán)形圖（甜甜圈圖）亦可表示占比，其差異是將餅圖的中間區(qū)域挖空，在空心區(qū)域顯示文本信息，比如標(biāo)題，優(yōu)勢是其「空間利用率更高」。

3. 餅圖的順序要得當(dāng)

這個規(guī)則與其他的數(shù)據(jù)圖表一致，我們在拿到數(shù)據(jù)后，不要急于去進(jìn)行數(shù)據(jù)可視化，而是應(yīng)該對數(shù)據(jù)進(jìn)行排序處理，一般來講，我們對于圖表都要進(jìn)行從大到小的數(shù)據(jù)排序，才更有利于我們展示數(shù)據(jù)，但是有一個例外的情況。

當(dāng)數(shù)據(jù)中包含一個類別叫「其他」時，無論其他的內(nèi)容占比為多少，我們最好都把他放置在餅圖的最后來展示。

面積圖的制作規(guī)范

面積圖又叫區(qū)域圖，與折線圖很相近，都可以用來展示隨著連續(xù)時間的推移數(shù)據(jù)的變化趨勢。區(qū)別在于，面積圖在折線與類別數(shù)據(jù)的水平軸（X軸）之間填充顏色或者紋理，形成一個面表示數(shù)據(jù)體積。相對于折線而言，被填充的區(qū)域可以更好的引起人們對總值趨勢的注意，所以面積圖主要用于傳達(dá)趨勢的大小，而不是確切的單個數(shù)據(jù)值。面積圖有三種不同的形態(tài)，根據(jù)數(shù)據(jù)以及背景的不同，均有其最佳的展示環(huán)境。

1. 盡量不重疊，使用透明色

當(dāng)圖表中要展示多組數(shù)據(jù)時，最好保證所有的數(shù)據(jù)都不重疊，這樣才可以更好的展示數(shù)據(jù)。如果無法避免重疊，則應(yīng)該適當(dāng)?shù)脑O(shè)置顏色和透明度，使得重疊的區(qū)域變得更加易讀。

突出信息

1. 重要的內(nèi)容用顏色區(qū)分

有時我們?yōu)榱送怀稣宫F(xiàn)某部分?jǐn)?shù)據(jù)，需要對它們進(jìn)行特殊的處理（包括添加輔助線，更改顏色，線條粗細(xì)等方法）來加大它們與其他數(shù)據(jù)的對比，以吸引用戶注意，并表明你想陳述的觀點。

如上左圖，通過添加輔助線和標(biāo)紅的方式，來顯示快遞公司未達(dá)到60萬件派件標(biāo)準(zhǔn)的月份，從而突出顯示公司業(yè)績不合格部分。如上右圖，通過對9月份的顏色區(qū)分，來突出顯示二手房價格在9月份達(dá)到前所未有的高度。

2. 把不重要的內(nèi)容變?yōu)榛疑?/b>