基于wordcloud2.js的动态词云

    此前接触到的词云板块大都是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中设置数据以及相关配置。

• 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

    其实wordcloud也有关于定时器、动画相关的扩展，前端知识扎实的话可以自行设置回调函数触发动画等，这里我们只是从数据上入手，通过js的定时器将数据进行变化达到词云图片的变化(有点像轮播233333，但是图片毕竟没有变化只是数据变了)，配置项照我之前所说，基础项都可以照搬的，在数据构造那一块设置一个定时器即可，这里的数据可以通过其他方式传递，比如我之前就是用的Django传过来一个极其冗杂的二维数组，这里为了简单直接用js读取文件(提取码：oftc)了。

    这里读取文件构造新的数组列表，用Math.floor((Math.random()*res.length))随机索引值随机选取不同的数组，设置定时器做循环。