在做可視化大屏設(shè)計(jì)的時(shí)候經(jīng)常遇到各種圖表設(shè)計(jì)，但是要是想要真正更好的展示數(shù)據(jù)的時(shí)候又會(huì)遇到問(wèn)題，例如：這個(gè)數(shù)據(jù)是用折線(xiàn)圖/柱狀圖/餅圖展示，一般的柱狀圖不夠好看，怎么裝飾一下比較好看，又不失圖表本身表達(dá)的意思。下面就介紹一下柱狀圖/折線(xiàn)圖/餅圖

簡(jiǎn)介及基本類(lèi)型

柱狀圖/Histogram

柱狀圖：柱狀圖又稱(chēng)條圖、條狀圖、主要用來(lái)表達(dá)數(shù)據(jù)之間的高度差異以及高度大小，它又可以分為：橫向柱狀圖/縱向柱狀圖。橫向柱狀圖又可以分為：分組柱狀圖/堆疊橫向柱狀圖/正負(fù)橫向柱狀圖/一般柱狀圖，縱向柱狀圖又可以分為：堆疊縱向柱狀圖/正負(fù)縱向柱狀圖/一般柱狀圖/分組柱狀圖。（以上分類(lèi)是比較常見(jiàn)，不是所有細(xì)分）下面展示一下這幾種柱狀圖

基本類(lèi)型詳述

一般柱狀圖適用條件

一般豎向柱狀圖經(jīng)常用來(lái)對(duì)比數(shù)值的大小，使用范圍非常廣泛，但是其不適合用在分類(lèi)太多的場(chǎng)景下，如果種類(lèi)比

較多，用豎向柱狀圖容易造成堆疊，此時(shí)適合用橫向柱狀圖。

堆疊柱狀圖

與并排顯示分類(lèi)的柱狀圖不同，堆疊柱狀圖將每個(gè)柱子分割以顯示相同類(lèi)型下各個(gè)數(shù)據(jù)的長(zhǎng)度。它可以形象

的展示一個(gè)大分類(lèi)包含的每個(gè)小分類(lèi)的數(shù)據(jù)，以及各個(gè)小分類(lèi)的占比，顯示的是單個(gè)項(xiàng)目與整體之間的關(guān)系。

正負(fù)柱狀圖

正負(fù)柱狀圖，又名雙向柱狀圖，使用正向和反向的柱子顯示類(lèi)別之間的數(shù)值比較。其中分類(lèi)軸表示需要對(duì)比

的分類(lèi)維度，連續(xù)軸代表相應(yīng)的數(shù)值。

橫向柱狀圖適用場(chǎng)景：

由于橫向柱狀圖既可以展示數(shù)據(jù)的長(zhǎng)度又可以橫向比較數(shù)據(jù)相對(duì)大小，所以橫向柱狀圖被用的頻率越來(lái)越多，下面我介紹一下我理解的不同橫向柱狀圖的使用場(chǎng)景。

1.不同場(chǎng)景分為長(zhǎng)度/高度/數(shù)據(jù)種類(lèi)不同，如果數(shù)據(jù)種類(lèi)多，對(duì)長(zhǎng)度限制少的可以運(yùn)用圖1。

2.如果數(shù)據(jù)種類(lèi)少，且允許內(nèi)容占據(jù)高度較高的話(huà)可以用圖2。

3.如果數(shù)據(jù)種類(lèi)少，允許內(nèi)容高度較高，但是數(shù)據(jù)數(shù)量之間差距比較大的話(huà)，可以用圖3。

柱狀圖樣式擴(kuò)展

在使用柱狀圖時(shí)經(jīng)常會(huì)因?yàn)樵兄鶢顖D的樣式過(guò)于難看而發(fā)愁，怎樣不失柱狀圖展示特點(diǎn)又會(huì)使柱狀圖更上檔次吶，下面介紹兩種修飾方式。

1.一般經(jīng)常用到的修飾是給柱狀圖加漸變，漸變不僅可以使柱狀圖好看，還可以使其結(jié)尾更加明顯，展示更直觀。

2.可以在柱狀圖結(jié)尾處加矩形或者正方形裝飾，在結(jié)尾處加上修飾使數(shù)字結(jié)尾處更直觀，圖形也更有層次性。

簡(jiǎn)介

折線(xiàn)圖/Line chart

折線(xiàn)圖是將排列在工作表的列或行中的數(shù)據(jù)進(jìn)行繪制后形成的線(xiàn)狀圖形。折線(xiàn)圖可以顯示時(shí)間（根據(jù)常用比例

設(shè)置）而變化的連續(xù)數(shù)據(jù)，非常適用于顯示在相等時(shí)間間隔下數(shù)據(jù)的趨勢(shì)。

折線(xiàn)圖的分類(lèi)沒(méi)有柱張圖這么豐富，其大致分為：一般折線(xiàn)圖/折線(xiàn)面積圖/柱折圖，三種類(lèi)型。

基本類(lèi)型

一般折線(xiàn)圖

一般折線(xiàn)圖又分為帶標(biāo)記的與不帶標(biāo)記的，不帶標(biāo)記的更能展示數(shù)據(jù)變化趨勢(shì)，沒(méi)有視覺(jué)干擾，帶標(biāo)記的不僅可以展示變化趨勢(shì)還可以表示出數(shù)據(jù)的高度差異。

折線(xiàn)面積圖

面積圖又分為常規(guī)面積圖/堆積面積圖/層疊面積圖。其中堆疊面積圖是兩種不同顏色的面積折線(xiàn)圖的堆疊，而層疊面積圖是上面的面積圖會(huì)對(duì)下面的面積圖顏色進(jìn)行作用，就和兩個(gè)圖層打開(kāi)，不同透明度的顏色互相影響。

折線(xiàn)面積圖適用場(chǎng)景：

由于折線(xiàn)面積圖面積相對(duì)于其它折線(xiàn)圖占比比較大，且視覺(jué)沖擊力比價(jià)強(qiáng)，所以對(duì)于界面面積占比比較大的折線(xiàn)圖可以用面積折線(xiàn)圖，例如中間大面積區(qū)域。

柱折圖

柱折圖既可以表述數(shù)據(jù)的高度差異，又可以展現(xiàn)數(shù)據(jù)的變化趨勢(shì)，但是兩個(gè)結(jié)合畫(huà)面豐富，相對(duì)于單獨(dú)的折線(xiàn)圖和柱狀圖而言其數(shù)據(jù)描述特性都相對(duì)減弱，所以如果對(duì)數(shù)據(jù)本身特征描述要求不是那么高的話(huà)可以用柱折圖。在制作過(guò)程中發(fā)現(xiàn)柱折圖的柱子適合比較暗的顏色，折線(xiàn)適合比較亮的顏色，這樣搭配起來(lái)能給使數(shù)據(jù)表現(xiàn)比較鮮明。

折線(xiàn)圖樣式擴(kuò)展

折線(xiàn)圖有折線(xiàn)/分割線(xiàn)/文字/標(biāo)記這幾部分組成，其中改變文字樣式是最一般的修飾，也是最方便修改的，除了文字還可以在其折線(xiàn)/分割線(xiàn)/標(biāo)記處，尋找修飾的辦法。

1.折線(xiàn)圖的標(biāo)記，可以使數(shù)字展現(xiàn)更直觀，更豐富。關(guān)于標(biāo)記的修飾我總結(jié)了三種：一種是三角形，一種是圓形，一種是正方形。

2.在一般折線(xiàn)圖的分割線(xiàn)處也可以加修飾，使其展示更加豐富。

3.對(duì)于折線(xiàn)面積圖而言，除了可以在標(biāo)記處/分割線(xiàn)處加裝飾還可以在其面上做漸變或者降低其不透明度。

簡(jiǎn)介及基本類(lèi)型

餅圖/Pie chart

餅圖（Pie）廣泛應(yīng)用于各個(gè)領(lǐng)域，它表示不同分類(lèi)的占比情況，通過(guò)弧度大小來(lái)對(duì)比各種分類(lèi)。餅圖可以很好地

幫助用戶(hù)快速了解數(shù)據(jù)的占比分配。

餅圖可以通過(guò)將一個(gè)圓餅按照分類(lèi)的占比劃分成多個(gè)區(qū)塊，整個(gè)圓餅代表數(shù)據(jù)總量，每個(gè)區(qū)塊（圓弧）表示該

分類(lèi)占總體的比例大小，所有區(qū)塊（圓弧）的和等于100%。餅圖相對(duì)柱狀圖和折線(xiàn)圖種類(lèi)較少，大致分為：一

般餅圖/環(huán)圖/玫瑰餅圖，下面展示一下它們

基本類(lèi)型詳述

一般餅圖/玫瑰餅圖及其應(yīng)用場(chǎng)景：

一般餅圖/玫瑰餅圖相比環(huán)圖整體性強(qiáng)，占比面積大，視覺(jué)沖擊力和畫(huà)面飽和度都比較強(qiáng)，所以也比較適用于界面面積大的設(shè)計(jì)，相反環(huán)圖由于面積占比小，畫(huà)面飽和度弱，所以不適合界面面積比較大的設(shè)計(jì)。

環(huán)圖

環(huán)圖在使用時(shí)比其它兩種餅圖更加廣泛，所以重點(diǎn)介紹一下環(huán)圖。環(huán)圖其本質(zhì)是將中間區(qū)域挖空的餅圖。盡管如此，環(huán)圖還是有一點(diǎn)微小的優(yōu)勢(shì)：餅圖整體性太強(qiáng)，會(huì)將讀者的注意力集中在比較餅圖內(nèi)各個(gè)扇形之間占整體比重的關(guān)系：但如果將兩個(gè)餅圖放在一起，很難同時(shí)進(jìn)行對(duì)比：而環(huán)圖在解決上述問(wèn)題時(shí)，具有讓讀者關(guān)注長(zhǎng)度而不是面積的視覺(jué)效果，這樣就能相對(duì)簡(jiǎn)單地對(duì)比不同的環(huán)圖。

同時(shí)，環(huán)圖相對(duì)于餅圖的空間利用率更高，我們可以使用它的空心區(qū)域顯示文本信息。

環(huán)圖適用場(chǎng)景：

環(huán)圖不適合界面中大面積一個(gè)環(huán)圖展示的情況，如果界面面積比較大，數(shù)據(jù)種類(lèi)多，可以表現(xiàn)每個(gè)種類(lèi)數(shù)據(jù)的占比，此時(shí)需要多個(gè)環(huán)圖來(lái)表述數(shù)據(jù)。這樣既能豐富畫(huà)面，也能準(zhǔn)確表達(dá)數(shù)據(jù)。

環(huán)圖的設(shè)計(jì)細(xì)節(jié)：

環(huán)圖是中間區(qū)域挖空的餅圖所以在設(shè)計(jì)中要利用好這個(gè)挖空的部分，添加一些文本信息，但是添加文本信息的時(shí)候要注意層次性，例如文本信息只是一個(gè)數(shù)字則給人含糊不清的感覺(jué)，但是數(shù)字和文字描述文字大小，以及文字顏色都一樣的情況下會(huì)使設(shè)計(jì)缺乏細(xì)節(jié)，所以最好是將數(shù)字放大且顏色醒目，將文字描述縮小且文字顏色調(diào)暗。

環(huán)圖樣式擴(kuò)展

環(huán)圖結(jié)構(gòu)組成就是環(huán)，所以樣式擴(kuò)展也是在環(huán)上，一般的除了可以改變環(huán)的顏色，還可以改變環(huán)形狀組成，以及在環(huán)上加裝飾。

1.改變環(huán)的形狀組成多種多樣，例如水滴狀/矩形組成的環(huán)。

2.在環(huán)上加裝飾可以在環(huán)上加矩形/三角形/菱形等不同形狀的裝飾，這些裝飾也可以改變其顏色或者加一些模糊效果來(lái)豐富。

總結(jié)：對(duì)于各種圖表的適用情況還要根據(jù)畫(huà)面的整體情況進(jìn)行調(diào)整，上面描述僅供借鑒，不代表這個(gè)場(chǎng)景一定用這種圖表比較好看，同樣對(duì)于圖表的樣式擴(kuò)展同樣是無(wú)限的，我只是列舉了幾種形式，更多樣式還是有待于自己去摸索實(shí)踐。（部分圖片來(lái)源網(wǎng)絡(luò)如有侵權(quán)請(qǐng)聯(lián)系刪除）