在信息爆炸、效率为先的今天,分析整理数据的能力对每个人来说都至关重要。由此也衍生出各种数据可视化技术,帮助开发者及用户便捷高效的掌握数据中蕴含的重要信息。
词云就是一种常见的数据可视化格式,它将词语彼此排列堆叠,以词云(又称标签云)的形式将数据直观的呈现给用户。作为开发者,在日常也会有大量制作词云图片的需求。
目前业界已经有ECharts和wordcloud2.js两大利器支持词云组件的编写。前者是百度出品的可视化图表库,词云只是其中的一类图表,相信大部分开发者已经体验过Echarts的魅力,本文不再赘述。今天就来尝试一下专注于词云的wordcloud2.js。

wordcloud2.js生成的词云
开始前的准备
首先页面必须是以HTML5规范编写。以下是在VSCode中以Emmet语句html:5
展开得到的页面示例
引入相关JS库
随后需要引入jQuery和wordcloud2.js
定义canvas容器
在body
中定义一个canvas
容器用来显示词云
检查浏览器是否支持
wordcloud2.js提供了验证是否可被当前浏览器支持的API。若当前浏览器不支持运行,则以下语句将返回false
定义options并调用WordCloud
具体API可参考wordcloud2.js官方文档
至此,一个美观大方的词云就制作完成了。Just enjoy it!

上述代码生成的词云
参考文章