? ? ? ?最近在一個項目中做數據可視化設計和實現的功能,有一些前端圖表設計和實現的收獲跟大家分享。
一、為用戶提供個性化的數據分析視圖
? ? ? ? 數據分析和數據可視化的優點不言而喻,但是數據可視化一定要結合用戶角色特征進行展示才有意義。比如普通員工和管理者角色,關注的重點肯定不同,普通員工會更注重個人績效、個人的排名等,而管理者會更注重整個部門的整體績效情況,可能還會關心整體中的一些極端個例。
? ? ? ? 所以為不同角色的用戶提供適合的數據分析視圖,才能讓數據展示有意義。
二、數據可視化常用圖表
? ? ? ? 數據可視化的常用圖表包括柱狀圖、餅圖、折線圖、散點圖、雷達圖、漏斗圖等。
? ? ? (1)柱狀圖
? ? ?優點:強調個體和個體之間的差異,由于人眼對高度比較敏感所以易于比較數據間的差別;
? ? ?缺點:不適宜大量的數據集即項數較多時不適合使用;
? ? ?適用場景:一個維度的數據比較、數據單純性展示、排序數據展示等;
? ? ?適用數據:數據集不大的二維數據集;
? ? ?注意事項:通常用戶習慣認為柱狀圖的X維是時間維,可以用顏色來區分每根柱子,改變用戶對時間趨勢的看法;如果分類項目的標簽文本比較長,會出現重疊,建議使用條形圖。
? ?(2)餅圖
? ? ? 優點:直觀的顯示各部分的占比和分布情況,強調個體和總體的比較;
? ? ? 缺點:數據不精細,不適合分類較多的情況;
? ? ? 適用場景:一個維度各項指標(一般不超過5個項目)占總體的占比情況,分布情況;
? ? ? 適用數據:具有整體意義的各項相同數據;
? ? ? 注意事項:使用時餅圖最好不超過5個,區塊越多用戶提取數據的能力就越弱;
? ? (3)折線圖
? ? ? 折線圖分為直線折線圖和曲線折線圖。直線折線圖適用于離散變量,曲線折線圖適用于連續變量。
? ? ? 優點:反應數據變化趨勢;
? ? ? 缺點:數據集太小時顯示不直觀;
? ? ? 適用場景:需要反應變化趨勢、關聯性;
? ? ? 適用數據:時間序列數據,關聯類數據;
? ?(4)散點圖
? ? 散點圖還有一種變形是氣泡圖,氣泡圖通過每個點的面積大小反映第三維。
? ? ?優點:直觀反映數據集中情況,對離散數據線性回歸等曲線預測性的擬合輔助作用;
? ? ?缺點:適用場景比較少;
? ? ?適用場景:對離散數據進行預測,兩個維度的數據;
? ? ?適用數據:離散值數據;
? (5)其他數據分析常用圖
? ? 熱力圖,用于表示密集程度,可以直觀清楚地看到頁面上每一個區域的訪客興趣焦點,圖形化展示,清晰直觀;
? ? 漏斗圖,用于表示數據轉化類關系,適用于業務流程比較規范、周期長、環節多的流程分析,通過漏斗各環節業務數據的比較,能夠直觀地發現和說明問題所在;
? ? 儀表盤,指標類數據;
? ? 雷達圖,適用于多維數據(四維數據),且每個維度必須可以排序。
? ? 最后其他最重要的核心數據,直接用數字顯示,最直觀。
三、數據可視化主要技術
前端常用的可視化技術主要有d3.js、echarts、highcharts;
其中d3.js的定制化更強,但是美觀度和工作量需要自己把握;echarts由百度提供,免費使用,開發工作量小,但是定制化能力弱;highcharts和echarts比較類似但是需要商業授權。
highcharts和d3.js是基于SVG渲染的,性能差些,但是是基于DOM操作的,用戶交互更精確,可以通過virtual dom技術解決性能差的問題,如react前端框架。
echarts基于canvas渲染的,性能更好些。