简单美观的文字标签云组件

经常在微博或微信的文章中看到漂亮的分析图。我认为在大数据的时代,目前最关键的就是如何让非专业人员轻松的进行数据分析,比如可以象使用office一样制作信息图(infographic),而不是用专业的制图工具。这一步跨过去,看到的将是欣欣向荣的真正大数据时代。

而这之前,首先缺少的就是,可以让普通开发人员使用的大数据时代的可视化图表组件,比如标签云图,所幸,业界已经有EChartsWordCloud这两大利器,本文只介绍后者。

中文

首先页面必须是html5编写。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>

引入jQueryWordCloud2.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

英文

评论