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