词云图

这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战

词云

词云事由一些文字，根据词语频率，以及一些形状来显现的图片

集成词云

本文介绍用wordCloud2.js 构建词云图 wordCloud2.js 构造词云图文档传送门 整体效果如下：

可以看出来形状呈现的是一朵云彩。 wordCloud2 里面有很多例子。也可以直接看一下源码，使用canvas进行绘制的，当然也支持html版本。ps(小技巧：如果想看源码，可以直接在github地址的后面加上1s，会有惊喜)。

安装

npm安装或者直接拿到wordcloud.js文件

npm install wordcloud

使用也是很简单

// my_canvas 为canvas 元素，list： 词云的数据
WordCloud(document.getElementById('my_canvas'), { list: list } );

此外还有很多参数配置 gridSize， weightFactor， fontFamily， color， rotateRatio， rotationSteps， backgroundColor， ellipticity， shape等等 其实这些参数很好理解，或者说多试几次就知道怎么回事了。 gridSize： 词之间的间隔。weightFactor：字号权重的比例。fontFamily： 字体，color： 字体颜色。rotateRatio：旋转角度。rotationSteps： 强制使用定义的角度 shape是想要说的重点，通过看api可以看到，如果shape是一个function的时候，是可以返回路径的算法的，这个可以看一下例子传送门 当然如果是字符串的时候，默认是circle，还支持diamond，square，triangle-forward，triangle，（别名triangle-upright），pentagon和star。

当然如果你想使用自定义图片，还支持选择本地图片。或者项目里需要写死一个图片的时候。这个工具会帮助生成shape想要的东西

下载图片

如果又来了波需求，想要用户下载词云图，当然也是没有问题的。可以直接把canvas转化成base64的数据，使用a标签就可以下载了

// css
<a type="button" id="saveImage">
    &nbsp;保存图片
</a>
// js
$('#saveImage').on('click', function () {
            const url = $('canvas')[0].toDataURL();
            this.download = 'wordcloud'});

加入html元素下载图片

好了又来了波需求，这次想在词云中添加一些文字，使用html标签 下面推荐一下html2canvas传送门 很好的满足需求，而且实现起来很方便

// canvas-container 包括canvas以及添加的html元素就可以了
html2canvas(document.querySelector("#canvas-container")).then(canvas => {
const url = canvas.toDataURL();
this.download = 'wordcloud';
this.href = url;
});