日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
前端如何一鍵生成多維度數(shù)據(jù)可視化分析報(bào)表

前言

本文是基于 H5編輯器 后臺(tái)管理系統(tǒng) 實(shí)戰(zhàn)的第二篇文章, 也是比較重要的一篇文章, 主要介紹后臺(tái)系統(tǒng)中如何基于已有數(shù)據(jù)表格自動(dòng)生成多維度可視化報(bào)表.

我之所以會(huì)花3篇文章去介紹這一塊的內(nèi)容, 是因?yàn)槟壳癇端產(chǎn)品很多都有類似的需求, 比如導(dǎo)入導(dǎo)出excel, 在線編輯表格(table),基于表格數(shù)據(jù)生成可視化圖表, 用戶權(quán)限路由和權(quán)限菜單設(shè)計(jì)等. 這里筆者總結(jié)為如下3點(diǎn)核心知識(shí):

  1. 如何使用JavaScript實(shí)現(xiàn)前端導(dǎo)入和導(dǎo)出excel文件(H5編輯器實(shí)戰(zhàn)復(fù)盤)
  2. 前端如何基于table中的數(shù)據(jù)一鍵生成多維度數(shù)據(jù)可視化分析報(bào)表
  3. 如何實(shí)現(xiàn)會(huì)員管理系統(tǒng)下的權(quán)限路由和權(quán)限菜單

希望通過(guò)這3篇文章的復(fù)盤和實(shí)戰(zhàn), 可以讓大家開發(fā)企業(yè)應(yīng)用的時(shí)候更加游刃有余. 本文主要涉及的技術(shù)點(diǎn)如下:

  • antv/g2 可視化組件庫(kù)
  • antd Table
  • 可度量緯度以及javascript分類算法

正文

通過(guò)上面的介紹我們可能還不太了解接下來(lái)我們要做什么, 為了方便大家理解, 我們先看看實(shí)現(xiàn)效果:

第一張圖是我們的Table數(shù)據(jù)源, 右上角有導(dǎo)出Excel和生成分析報(bào)告這兩個(gè)功能鍵, 導(dǎo)出excel部分我們已經(jīng)在上篇文章介紹過(guò)了, 這里我們會(huì)詳細(xì)分析生成分析報(bào)告功能. 還有就是可視化圖表我們采用的是antv的g2, 如果對(duì)@ant-design/charts比較熟悉, 也可以直接使用charts, 圖表庫(kù)主要是為我們提供數(shù)據(jù)可視化呈現(xiàn)的, 不是本文的重點(diǎn), 感興趣可以自行學(xué)習(xí)了解.

可度量緯度的理解

什么是可度量緯度呢? 這里簡(jiǎn)單給大家舉個(gè)例子, 比如我們要分析程序員的脫單意向, 我們需要從幾個(gè)緯度去統(tǒng)計(jì), 比如性別, 脫單渴望度, 如果我們還需要更詳細(xì)的分析用戶, 我們還可以收集用戶的愛好,年齡層這些, 這些特征(性別,脫單渴望度,愛好)都可以作為單一緯度對(duì)用戶進(jìn)行分析統(tǒng)計(jì), 所以它們都是可分析的緯度. 但是比如用戶填寫的昵稱, ID等信息, 每個(gè)人基本都不一樣, 對(duì)這樣的緯度進(jìn)行分析可能會(huì)出現(xiàn)“千人千面”的局面, 并不適合作為統(tǒng)計(jì)學(xué)指標(biāo)來(lái)分析, 所以這樣的字段就是不可度量緯度. 如下數(shù)據(jù):

從上面的分析中可以發(fā)現(xiàn)性別, 愛好, 脫單渴望度這3個(gè)緯度都是可度量緯度, 所以我們可以對(duì)其進(jìn)行分析. 分析結(jié)果如下:

以上數(shù)據(jù)均是筆者通過(guò) H5-Dooring 編輯器配置的表單頁(yè)收集而來(lái), 數(shù)據(jù)基本真實(shí). 如果你也想填寫該問(wèn)卷, 可以點(diǎn)擊閱讀原文填寫.

由上圖可以看出, 填寫表單的人有90%為男性, 10%為女性, 其中60%的人平時(shí)的愛好是 吃, 睡. 40%的人平時(shí)喜歡健身, 旅游(這個(gè)還是不錯(cuò)的~). 然后由第三張圖我們可以發(fā)現(xiàn)有50%的人渴望脫單, 有20%的人覺得單身不錯(cuò)(太難了). 所以基本根據(jù)圖表分析我們可以得到一些有用的信息來(lái)知道我們后期的脫單行動(dòng).

以上是一個(gè)真實(shí)的例子,當(dāng)然企業(yè)實(shí)際應(yīng)用中分析的內(nèi)容可往往會(huì)更有價(jià)值, 通過(guò)數(shù)據(jù)的直觀呈現(xiàn)來(lái)知道企業(yè)做決策, 這一點(diǎn)是可視化圖表的很重要的一個(gè)價(jià)值點(diǎn).

說(shuō)了概念和實(shí)際應(yīng)用,我們接下來(lái)看看如何通過(guò)技術(shù)的手段去實(shí)現(xiàn)這樣的功能.

基于數(shù)據(jù)一鍵生成多維度數(shù)據(jù)可視化分析報(bào)表解決方案

上面介紹了可度量緯度的概念, 這一章節(jié)我們就來(lái)實(shí)現(xiàn)如何計(jì)算可度量緯度. 我們都知道Table中某個(gè)字段具有可度量性, 它要么是n選1, 要么是多選, 所以我們基于這個(gè)規(guī)律, 來(lái)提取Table中單選和多選的字段, 但前提是要可表單收集頁(yè)數(shù)據(jù)結(jié)構(gòu)保持一致, 我們看看用H5-Dooring配置的表單收集頁(yè)長(zhǎng)啥樣:

我們從表單中可以看出, 性別, 愛好, 脫單渴望度屬于可度量緯度, 我們因該將其字段數(shù)據(jù)定義為如下格式:

 
 
 
 
    
  
  
  
  
  1. [ 
    2. 
  
  
  
  
  2.   {  
    3. 
  
  
  
  
  3.     value: "健身",  
    4. 
  
  
  
  
  4.     label: "健身",  
    5. 
  
  
  
  
  5.     key: "健身" 
    6. 
  
  
  
  
  6.    } 
    7. 
  
  
  
  
  7. ] 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9. // 或者(一般出現(xiàn)在多選情況) 
    10. 
  
  
  
  
  10. ["美食", "健身", "旅游"] 
    11.

這樣我們就能根據(jù)數(shù)據(jù)特征用javascript的算法將其可度量指標(biāo)提取出來(lái). 代碼如下:

 
 
 
 
    
  
  
  
  
  1. const generateDistData = (key:string, list:List) => { 
    2. 
  
  
  
  
  2.         let distDataMap:any = {}, 
    3. 
  
  
  
  
  3.             distData = [] 
    4. 
  
  
  
  
  4.         list.forEach((item:Item) => { 
    5. 
  
  
  
  
  5.             // 當(dāng)前緯度的類別 
    6. 
  
  
  
  
  6.             let curKey = typeof item[key] === 'object' ? item[key][0].label : item[key]; 
    7. 
  
  
  
  
  7.             if(distDataMap[curKey]) { 
    8. 
  
  
  
  
  8.                 distDataMap[curKey]++; 
    9. 
  
  
  
  
  9.             }else { 
    10. 
  
  
  
  
  10.                 distDataMap[curKey] = 1; 
    11. 
  
  
  
  
  11.             } 
    12. 
  
  
  
  
  12.         }) 
    13. 
  
  
  
  
  13.  
    14. 
  
  
  
  
  14.         // 生成目標(biāo)數(shù)組 
    15. 
  
  
  
  
  15.         for(let k in distDataMap) { 
    16. 
  
  
  
  
  16.             distData.push({name: k, value: distDataMap[k]}) 
    17. 
  
  
  
  
  17.         } 
    18. 
  
  
  
  
  18.         return distData 
    19. 
  
  
  
  
  19.   } 
    20.

以上方法可以將緯度信息提取出來(lái)并生成antv/g2可以消費(fèi)的數(shù)據(jù)體. 代碼采用對(duì)象法來(lái)對(duì)table數(shù)據(jù)也就是list進(jìn)行過(guò)濾分類(根據(jù)指定的key), 最后將分類數(shù)據(jù)同一放入目標(biāo)數(shù)組中.

generateDistData方法的第一個(gè)參數(shù)key, 也就是可度量緯度的字段名, 我們?cè)赥able數(shù)據(jù)生成完成的同時(shí)會(huì)生成可度量緯度數(shù)組, 用戶每切換一次度量緯度會(huì)調(diào)用一次generateDistData用來(lái)生成對(duì)應(yīng)的可供圖表庫(kù)消費(fèi)的數(shù)據(jù). 如下實(shí)現(xiàn):

 
 
 
 
    
  
  
  
  
  1. const handleAnazlyChange = (index:number, v:string) => { 
    2. 
  
  
  
  
  2.     const config = { 
    3. 
  
  
  
  
  3.         appendPadding: 10, 
    4. 
  
  
  
  
  4.         data: generateDistData(v, list),   // 默認(rèn)展示第一個(gè)字段的分析數(shù)據(jù) 
    5. 
  
  
  
  
  5.         angleField: 'value', 
    6. 
  
  
  
  
  6.         colorField: 'name', 
    7. 
  
  
  
  
  7.         radius: 0.8, 
    8. 
  
  
  
  
  8.         label: { 
    9. 
  
  
  
  
  9.           type: 'inner', 
    10. 
  
  
  
  
  10.           offset: '-0.5', 
    11. 
  
  
  
  
  11.           content: '{name} {percentage}', 
    12. 
  
  
  
  
  12.           style: { 
    13. 
  
  
  
  
  13.             fill: '#fff', 
    14. 
  
  
  
  
  14.             fontSize: 14, 
    15. 
  
  
  
  
  15.             textAlign: 'center', 
    16. 
  
  
  
  
  16.           }, 
    17. 
  
  
  
  
  17.         }, 
    18. 
  
  
  
  
  18.     }; 
    19. 
  
  
  
  
  19.     setConfig(config) 
    20. 
  
  
  
  
  20. } 
    21.

最后我們將數(shù)據(jù)消費(fèi)給圖表:

 
 
 
 
    
  
  
  
  
  1.  
    2.

以上就實(shí)現(xiàn)了我們上面說(shuō)的功能, 如果想學(xué)習(xí)源碼, 可以參考H5-Dooring.所以, 今天你又博學(xué)了嗎?

最后

以上教程筆者已經(jīng)集成到 H5-Dooring 中，對(duì)于一些更復(fù)雜的交互功能，通過(guò)合理的設(shè)計(jì)也是可以實(shí)現(xiàn)的，大家可以自行探索研究。

本文轉(zhuǎn)載自微信公眾號(hào)「趣談前端」


網(wǎng)站標(biāo)題：前端如何一鍵生成多維度數(shù)據(jù)可視化分析報(bào)表
當(dāng)前地址：http://www.dlmjj.cn/article/cdedihs.html