此前接触到的词云板块大都是python的wordcloud模块或者echarts的自浮云，echarts的词云也是基于wordcloud2.js做的扩展，而且之后将之根据三方库封装成了插件,所以在官方示例中也找不到相关案例
python中的词云源于WordCloud库，首先需要安装，大抵流程分为3步：
读取字符文件(其中可能需要设计jieba或者其他方法做处理)、配置词云属性、显示图例，其中不免涉及许多数据处理。
相比之下wordcloud2.js反而更容易上手，不需要安装库不需要太多逻辑处理，一套配置可以照搬，需要哪些倒时候加两行配置即可，数据方面以二维数组在画布上绘制的单词/文本列表，形式为[word，size]，例如： [['foo'，12]，['bar'，6]]，因为是基于前端的js渲染，不熟悉前端的话可能比较陌生，但是殊途同归嘛，总归是构造出一个二维数组，我们也可以用python构造传递过去直接使用，python构造列表谁还不会呢。
使用
WordCloud(elements, options);
elements是画布的DOM元素，类似document.getElementById('my_canvas')or $('#my_canvas')[0],options中设置数据以及相关配置。
Options属性
- list：数据列表，以2维数组形式[[单词，大小]，[单词，大小]]
- fontFamily：字体
- fontWeight：字体权重，普通，粗体、指定数值或其他
- color：文本的颜色
- minSize：在画布上绘制的最小字体大小
- clearCanvas：用背景颜色绘制整个画布
- weightFactor：函数调用，数字乘以列表中每个单词的大小
- backgroundColor：背景颜色
- gridSize：用于标记画布可用性的网格大小（以像素为单位）， 网格大小越大，单词之间的差距越大。
- rotateRatio：旋转单词的概率。将数字设置为1以始终旋转
- 更多相关配置可参考文档
简单实例
- 页面一定得遵守HTML5规范
- 随后需要引入jQuery和wordcloud2.js
- 页面中简单定义一个cavans容器作为画布显示即可
- wordcloud2.js提供了验证是否可被当前浏览器支持的
APIWordCloud.isSupported,如果发现无法正常显示的话可以去窗口调用api查看是否是因为浏览器不支持的原因 - 构造options
- 调用WordCloud
<script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Jquery和wordcloud-->
<script src="jquery-3.3.1.min.js"></script>
<script src="wordcloud2.js"></script>
</head>
<body>
<div id="canvas-container" align="center">
<!--定义一个cavans容器作为画布显示-->
<canvas id="canvas" width="400px" height="600px"></canvas>
</div>
<script>
// 构造options
var options = eval({
"list":[
['python', 15],
['10k-20k ', 9],
['广州 ', 7],
['经验3-5年', 6],
['大专及以上', 4],
['全职', 5],
['双休', 4],
['五险一金', 3],
['餐补', 3]
],
"gridSize": 16, // size of the grid in pixels
"weightFactor": 10, // number to multiply for size of each word in the list
"fontWeight": 'normal', // 'normal', 'bold' or a callback
"fontFamily": 'Times, serif', // font to use
"color": 'random-light', // 'random-dark' or 'random-light'
"backgroundColor": '#333', // the color of canvas
"rotateRatio": 1 // probability for the word to rotate. 1 means always rotate
});
var canvas = document.getElementById('canvas');
//调用WordCloud
WordCloud(canvas, options);
</script>
</body>
</html>
</script>
动态词云
其实wordcloud也有关于定时器、动画相关的扩展，前端知识扎实的话可以自行设置回调函数触发动画等，这里我们只是从数据上入手，通过js的定时器将数据进行变化达到词云图片的变化(有点像轮播233333，但是图片毕竟没有变化只是数据变了)，配置项照我之前所说，基础项都可以照搬的，在数据构造那一块设置一个定时器即可，这里的数据可以通过其他方式传递，比如我之前就是用的Django传过来一个极其冗杂的二维数组，这里为了简单直接用js读取文件(提取码：oftc)了。
这里读取文件构造新的数组列表，用Math.floor((Math.random()*res.length))随机索引值随机选取不同的数组，设置定时器做循环。
<script>
function load(name) {
let xhr = new XMLHttpRequest(),
okStatus = document.location.protocol === "file:" ? 0 : 200;
xhr.open('GET', name, false);
xhr.overrideMimeType("text/html;charset=utf-8");//默认为utf-8
xhr.send(null);
return xhr.status === okStatus ? xhr.responseText : null;
}
//读取文件构造数组
let text = load('data.txt');
var res=JSON.parse(text.replace(/\s/g,"").replace(/\'/g,'"'));
// 构造options
var options = eval({
"list": res[Math.floor((Math.random()*res.length))],
"gridSize": 16, // size of the grid in pixels
"weightFactor": 10, // number to multiply for size of each word in the list
"fontWeight": 'normal', // 'normal', 'bold' or a callback
"fontFamily": 'Times, serif', // font to use
"color": 'random-light', // 'random-dark' or 'random-light'
"backgroundColor": '#333', // the color of canvas
"rotateRatio": 1 // probability for the word to rotate. 1 means always rotate
});
var canvas = document.getElementById('canvas');
WordCloud(canvas, options);
//设置定时器
setInterval(function(){
var options = eval({
"list": res[Math.floor((Math.random()*res.length))],
"gridSize": 16, // size of the grid in pixels
"weightFactor": 10, // number to multiply for size of each word in the list
"fontWeight": 'normal', // 'normal', 'bold' or a callback
"fontFamily": 'Times, serif', // font to use
"color": 'random-light', // 'random-dark' or 'random-light'
"backgroundColor": '#333', // the color of canvas
"rotateRatio": 1 // probability for the word to rotate. 1 means always rotate
});
WordCloud(canvas, options);
}, 2000)
</script>
words.gif
0.jpg
网友评论