前言?
自從跟大家分享第一篇《大數(shù)據(jù)可視化大屏設(shè)計(jì)經(jīng)驗(yàn)，教給你！》，很多小伙伴都會(huì)問(wèn)我一些相關(guān)的問(wèn)題，看了小伙伴給我發(fā)的視覺(jué)稿，整體都還不錯(cuò)，但是發(fā)現(xiàn)圖表的設(shè)計(jì)都有一些問(wèn)題，大家可能對(duì)數(shù)據(jù)可視化的圖表設(shè)計(jì)經(jīng)驗(yàn)少一些，所以這篇文章就挖掘一下圖表的細(xì)節(jié)表現(xiàn)，分享我曾經(jīng)遇到過(guò)的坑和對(duì)圖表設(shè)計(jì)的理解。
圖表設(shè)計(jì)?
圖表設(shè)計(jì)概念
圖表設(shè)計(jì)是數(shù)據(jù)可視化的一個(gè)分支領(lǐng)域，是對(duì)數(shù)據(jù)進(jìn)行二次加工，用統(tǒng)計(jì)圖表的方式進(jìn)行呈現(xiàn)，也是數(shù)據(jù)可視化的核心表現(xiàn)，圖表設(shè)計(jì)既要保證圖表本身數(shù)據(jù)清晰準(zhǔn)確、直觀(guān)易懂，又要在找準(zhǔn)用戶(hù)關(guān)注的核心內(nèi)容進(jìn)行適當(dāng)?shù)耐伙@，幫助用戶(hù)通過(guò)數(shù)據(jù)進(jìn)行決策。
下面分析三種常用的可視化圖表設(shè)計(jì)：
折線(xiàn)圖
折線(xiàn)圖常用于表示數(shù)據(jù)的變化和趨勢(shì)，坐標(biāo)軸的不同對(duì)折線(xiàn)的變化幅度有很大的影響。
左圖坐標(biāo)軸設(shè)定的太低，折線(xiàn)變化過(guò)于陡峭，圖中數(shù)值區(qū)間為（10-34）數(shù)據(jù)可視化的表現(xiàn)過(guò)于夸大了折線(xiàn)變化的趨勢(shì)。
右圖坐標(biāo)軸的數(shù)值設(shè)定的太高，則折線(xiàn)變化過(guò)于平緩，無(wú)法清晰的表現(xiàn)折線(xiàn)的變化。
合理的折線(xiàn)圖應(yīng)當(dāng)占據(jù)圖表的三分之二的位置，圖表的X軸數(shù)值范圍應(yīng)根據(jù)折線(xiàn)的數(shù)值增減變化而變化，這需要跟前端小哥哥小姐姐說(shuō)明，做成動(dòng)態(tài)計(jì)算。
折線(xiàn)圖的折線(xiàn)粗細(xì)要合理，過(guò)細(xì)的折線(xiàn)會(huì)降低數(shù)據(jù)表現(xiàn)，過(guò)粗的折線(xiàn)會(huì)損失折線(xiàn)中的數(shù)據(jù)波動(dòng)細(xì)節(jié)，視覺(jué)上較難精準(zhǔn)找到折線(xiàn)點(diǎn)的相應(yīng)數(shù)值！我通常用兩個(gè)像素的線(xiàn)，看起來(lái)比較合適！
右圖刻度線(xiàn)顏色過(guò)重，影響圖表數(shù)據(jù)的表現(xiàn)，零基線(xiàn)跟圖表內(nèi)的刻度線(xiàn)對(duì)比不夠明顯，整體很亂。零基線(xiàn)是強(qiáng)調(diào)起始位置的，一般要比圖表內(nèi)的線(xiàn)顏色凸出一些。
條形圖/柱狀圖
理想很豐滿(mǎn)，現(xiàn)實(shí)很骨感。這個(gè)案例是我之前在工作中遇到的問(wèn)題，數(shù)據(jù)進(jìn)來(lái)后，被嚇到了，問(wèn)題的原因是沒(méi)有跟前端小哥姐溝通好，他們把X軸寫(xiě)死，導(dǎo)致出現(xiàn)這種問(wèn)題，其實(shí)應(yīng)該情況要把這些圖表的取值范圍寫(xiě)成動(dòng)態(tài)計(jì)算的。
例如，以現(xiàn)在數(shù)值范圍為例，數(shù)據(jù)的最高值為18，X軸最高數(shù)值應(yīng)該為25，當(dāng)數(shù)據(jù)又上升一定的高度后，X軸再上升到相應(yīng)的數(shù)值高度，這樣避免了如右圖的問(wèn)題。
坐標(biāo)軸的標(biāo)簽文字最好能水平排列，當(dāng)X軸標(biāo)簽文字過(guò)多時(shí)，不建議傾斜排列、上下排列、換行排列文字多了這樣的展示大大降低了閱讀性！下圖給出兩個(gè)解決方案，大大提高標(biāo)簽文字的閱讀性！
解決方案
柱子之間過(guò)于分散就會(huì)失去數(shù)據(jù)之間的關(guān)聯(lián)性，過(guò)密就會(huì)變得數(shù)據(jù)之間沒(méi)有獨(dú)立性更不利于舒適閱讀。
當(dāng)柱子為n時(shí)，柱子直接的距離建議與n相差不要太大，柱子靠邊的距離，最好是柱子之間的一半的距離，這樣視覺(jué)上最為舒適。
餅圖
左1圖，不建議在餅圖內(nèi)與百分比數(shù)值一起顯示，餅圖本身的形狀和大小，文字過(guò)多時(shí)容易溢出，如果出現(xiàn)一個(gè)2%一個(gè)1%，就很難辨別圖形指向，這樣也就失去了數(shù)據(jù)可視化的意義，PPT通常有這樣的設(shè)計(jì)樣式，因?yàn)槭莻€(gè)死圖。
左3圖，人的閱讀習(xí)慣是從左到右，從上到下，所以數(shù)據(jù)從大到小排列，更有助于閱讀，圖形也更具美感！
當(dāng)餅圖為檢出率，或者一些重要信息檢測(cè)的重點(diǎn)關(guān)注數(shù)據(jù)，就不建議大小數(shù)據(jù)順時(shí)針排列，左1圖這種情況一般很少出現(xiàn)，因?yàn)殛P(guān)注的是檢出數(shù)值，展示未檢出數(shù)據(jù)實(shí)為雞肋，可能是極少情況的需要吧！
右圖對(duì)于類(lèi)似檢出率的數(shù)據(jù)最為合適，直觀(guān)清晰，沒(méi)有無(wú)用數(shù)據(jù)干擾！
當(dāng)餅圖的標(biāo)簽維度過(guò)多時(shí)，就不適合把數(shù)據(jù)圍繞餅圖一周展示，會(huì)很亂，不易閱讀，解決方案如右圖！
圖表分類(lèi)圖
分享一張圖表分類(lèi)大全，保存起來(lái)，設(shè)計(jì)數(shù)據(jù)可視化產(chǎn)品，會(huì)有重要參考價(jià)值！
這張圖由設(shè)計(jì)師Abela對(duì)圖表的各種特征進(jìn)行了大致的概括總結(jié)。
