前言?

自從跟大家分享第一篇《大數(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)確芳肌、直觀易懂灵再，又要在找準(zhǔn)用戶關(guān)注的核心內(nèi)容進(jìn)行適當(dāng)?shù)耐伙@，幫助用戶通過(guò)數(shù)據(jù)進(jìn)行決策亿笤。

下面分析三種常用的可視化圖表設(shè)計(jì)：

折線圖

折線圖常用于表示數(shù)據(jù)的變化和趨勢(shì)翎迁，坐標(biāo)軸的不同對(duì)折線的變化幅度有很大的影響。

左圖坐標(biāo)軸設(shè)定的太低净薛，折線變化過(guò)于陡峭汪榔，圖中數(shù)值區(qū)間為（10-34）數(shù)據(jù)可視化的表現(xiàn)過(guò)于夸大了折線變化的趨勢(shì)。

右圖坐標(biāo)軸的數(shù)值設(shè)定的太高肃拜，則折線變化過(guò)于平緩痴腌，無(wú)法清晰的表現(xiàn)折線的變化。

合理的折線圖應(yīng)當(dāng)占據(jù)圖表的三分之二的位置燃领，圖表的X軸數(shù)值范圍應(yīng)根據(jù)折線的數(shù)值增減變化而變化士聪，這需要跟前端小哥哥小姐姐說(shuō)明，做成動(dòng)態(tài)計(jì)算猛蔽。

折線圖的折線粗細(xì)要合理剥悟，過(guò)細(xì)的折線會(huì)降低數(shù)據(jù)表現(xiàn)灵寺，過(guò)粗的折線會(huì)損失折線中的數(shù)據(jù)波動(dòng)細(xì)節(jié)，視覺(jué)上較難精準(zhǔn)找到折線點(diǎn)的相應(yīng)數(shù)值区岗！我通常用兩個(gè)像素的線略板，看起來(lái)比較合適！

右圖刻度線顏色過(guò)重慈缔，影響圖表數(shù)據(jù)的表現(xiàn)叮称，零基線跟圖表內(nèi)的刻度線對(duì)比不夠明顯，整體很亂藐鹤。零基線是強(qiáng)調(diào)起始位置的瓤檐，一般要比圖表內(nèi)的線顏色凸出一些。

條形圖/柱狀圖

理想很豐滿教藻，現(xiàn)實(shí)很骨感距帅。這個(gè)案例是我之前在工作中遇到的問(wèn)題右锨，數(shù)據(jù)進(jìn)來(lái)后括堤，被嚇到了，問(wèn)題的原因是沒(méi)有跟前端小哥姐溝通好绍移，他們把X軸寫死悄窃，導(dǎo)致出現(xiàn)這種問(wèn)題，其實(shí)應(yīng)該情況要把這些圖表的取值范圍寫成動(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ì)于類似檢出率的數(shù)據(jù)最為合適，直觀清晰坐昙，沒(méi)有無(wú)用數(shù)據(jù)干擾！

當(dāng)餅圖的標(biāo)簽維度過(guò)多時(shí)炸客，就不適合把數(shù)據(jù)圍繞餅圖一周展示，會(huì)很亂痹仙，不易閱讀是尔，解決方案如右圖拟枚！

圖表分類圖

分享一張圖表分類大全薪铜，保存起來(lái)恩溅，設(shè)計(jì)數(shù)據(jù)可視化產(chǎn)品，會(huì)有重要參考價(jià)值脚乡！

這張圖由設(shè)計(jì)師Abela對(duì)圖表的各種特征進(jìn)行了大致的概括總結(jié)蜒滩。