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 |
原文地址：https://www.cnblogs.com/wincai/p/9151105.html