[轉]簡單美觀的文字標簽雲組件
阿新 • • 發佈：2018-06-07
targe src bsp 中文 wid and 必須 grid rand
http://ibruce.info/2014/02/10/the-most-beautiful-word-cloud/
經常在微博或微信的文章中看到漂亮的分析圖。我認為在大數據的時代，目前最關鍵的就是如何讓非專業人員輕松的進行數據分析，比如可以象使用 office 一樣制作信息圖（infographic），而不是用專業的制圖工具。這一步跨過去，看到的將是欣欣向榮的真正大數據時代。
而這之前，首先缺少的就是，可以讓普通開發人員使用的大數據時代的可視化圖表組件，比如標簽雲圖，所幸，業界已經有 ECharts 和 WordCloud 這兩大利器，本文只介紹後者。
中文
首先頁面必須是 html5 編寫。
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> |
引入 jQuery 和 WordCloud2.js。
| <script src="src/wordcloud2.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> |
定義 canvas 容器。
| <div id="canvas-container" align="center"> <canvas id="canvas" width="800px" height="600px"></canvas> </div> |
繪圖。
| <script> var options = eval({ "list": [[‘傻獵豹‘, 10], [‘不如‘, 9], [‘麻花疼‘, 7], [‘麻雲‘, 6],[‘李眼紅‘, 4], [‘雷布斯‘, 5],[‘周紅衣‘, 4],[‘劉墻洞‘, 3],[‘李國情‘, 3]], "gridSize": 8, "weightFactor": 16, "fontFamily": ‘Hiragino Mincho Pro, serif‘, "color": ‘random-dark‘, "backgroundColor": ‘#f0f0f0‘, "rotateRatio": 0 }); var canvas = document.getElementById(‘canvas‘); WordCloud(canvas, options); </script> |
至此，全部完畢。執行頁面，美麗的雲圖便展現在你面前，具體的 API 可以參考這裏。
下面舉個英文的例子，為了美觀稍微改變一下參數：
| "list": [[‘bruce-sha‘, 10], [‘buru‘, 9], [‘tencent‘, 7], [‘alibaba‘, 6], [‘baidu‘, 4], [‘xiaomi‘, 5],[‘360‘, 4],[‘jingdong‘, 3],[‘dangdang‘, 3],[‘ibruce.info‘, 1]], "gridSize": 16, "weightFactor": 16, "fontFamily": ‘Times, serif‘, "color": ‘random-light‘, "backgroundColor": ‘#333‘, "rotateRatio": 0 |
[轉]簡單美觀的文字標簽雲組件