基于wordcloud2.js的动态词云

2023年12月15日 292次阅读

    此前接触到的词云板块大都是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以始终旋转
  • 更多相关配置可参考文档

简单实例

  1. 页面一定得遵守HTML5规范
  2. 随后需要引入jQuery和wordcloud2.js
  3. 页面中简单定义一个cavans容器作为画布显示即可
  4. wordcloud2.js提供了验证是否可被当前浏览器支持的APIWordCloud.isSupported,如果发现无法正常显示的话可以去窗口调用api查看是否是因为浏览器不支持的原因
  5. 构造options
  6. 调用WordCloud
<script>
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Jquery和wordcloud-->
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-3.3.1.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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>
点赞