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
|
