HTML5词云wordcloud2.js初体验
Posted 苏易北
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5词云wordcloud2.js初体验相关的知识，希望对你有一定的参考价值。
https://abelsu7.top/2018/03/19/wordcloud2/
复制到浏览器中访问体验更佳~
在信息爆炸、效率为先的今天，分析整理数据的能力对每个人来说都至关重要。由此也衍生出各种数据可视化技术，帮助开发者及用户便捷高效的掌握数据中蕴含的重要信息。
词云就是一种常见的数据可视化格式，它将词语彼此排列堆叠，以词云（又称标签云）的形式将数据直观的呈现给用户。作为开发者，在日常也会有大量制作词云图片的需求。
目前业界已经有ECharts和wordcloud2.js两大利器支持词云组件的编写。前者是百度出品的可视化图表库，词云只是其中的一类图表，相信大部分开发者已经体验过Echarts的魅力，本文不再赘述。今天就来尝试一下专注于词云的wordcloud2.js。
wordcloud2.js生成的词云
开始前的准备
首先页面必须是以HTML5规范编写。以下是在VSCode中以Emmet语句html:5展开得到的页面示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
引入相关JS库
随后需要引入jQuery和wordcloud2.js
<script src="https://cdn.bootcss.com/wordcloud2.js/1.1.0/wordcloud2.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
定义canvas容器
在body中定义一个canvas容器用来显示词云
<div id="canvas-container" align="center">
<canvas id="canvas" width="600px" height="400px"></canvas>
</div>
检查浏览器是否支持
wordcloud2.js提供了验证是否可被当前浏览器支持的API。若当前浏览器不支持运行，则以下语句将返回false
> WordCloud.isSupported
true
定义options并调用WordCloud
具体API可参考wordcloud2.js官方文档
<script>
var options = eval({
"list": [
['Google', 10],
['Tencent', 9],
['Alibaba', 7],
['Baidu', 6],
['NetEase', 4],
['JD', 5],
['Youku', 4],
['Meituan', 3],
['Douban', 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(canvas, options);
</script>
至此，一个美观大方的词云就制作完成了。Just enjoy it！
上述代码生成的词云
参考文章
可能是目前最好的词云解决方案wordcloud2 | 统计之都
简单美观的文字标签云组件 | 不如
HTML5 Word Cloud | timdream.org
wordcloud2.js Demo | timdream.org
wordcloud | Github
wordcloud2.js | Github
以上是关于HTML5词云wordcloud2.js初体验的主要内容，如果未能解决你的问题，请参考以下文章