在信息爆炸、效率为先的今天，分析整理数据的能力对每个人来说都至关重要。由此也衍生出各种数据可视化技术，帮助开发者及用户便捷高效的掌握数据中蕴含的重要信息。

词云就是一种常见的数据可视化格式，它将词语彼此排列堆叠，以词云（又称标签云）的形式将数据直观的呈现给用户。作为开发者，在日常也会有大量制作词云图片的需求。

目前业界已经有ECharts和wordcloud2.js两大利器支持词云组件的编写。前者是百度出品的可视化图表库，词云只是其中的一类图表，相信大部分开发者已经体验过Echarts的魅力，本文不再赘述。今天就来尝试一下专注于词云的wordcloud2.js。

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>
HTML
Copy

引入相关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>
JavaScript
Copy

定义canvas容器

在body中定义一个canvas容器用来显示词云

<div id="canvas-container" align="center">
    <canvas id="canvas" width="600px" height="400px"></canvas>
</div>
HTML
Copy

检查浏览器是否支持

wordcloud2.js提供了验证是否可被当前浏览器支持的API。若当前浏览器不支持运行，则以下语句将返回false

> WordCloud.isSupported
true
JavaScript
Copy

定义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>
JavaScript
Copy

至此，一个美观大方的词云就制作完成了。Just enjoy it！

上述代码生成的词云
上述代码生成的词云

参考文章

  1. 可能是目前最好的词云解决方案wordcloud2 | 统计之都
  2. 简单美观的文字标签云组件 | 不如
  3. HTML5 Word Cloud | timdream.org
  4. wordcloud2.js Demo | timdream.org
  5. wordcloud | Github
  6. wordcloud2.js | Github