两个wordcloud2在同一个闪亮的页面上

要在同一个页面上显示两个WordCloud2（词云图），你需要确保每个词云图都有独立的容器，并且它们的样式和配置不会相互干扰。以下是一个基本的示例，展示了如何在HTML页面中使用JavaScript库（如wordcloud2.js）来创建两个词云图。

基础概念

词云图（Word Cloud）是一种数据可视化技术，用于表示文本数据。在词云图中，单词的大小通常与其在文本中出现的频率成正比，使得最常见的单词显示得最大。

类型

静态词云：一次性生成的图像。
动态词云：可以实时更新和交互的词云。

应用场景

社交媒体分析：了解用户讨论的热点话题。
市场调研报告：突出产品或服务的关键词。
教育资源：帮助学生理解文本的重点内容。

示例代码

以下是一个简单的HTML页面示例，展示了如何创建两个词云图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双词云图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/wordcloud2.js"></script>
    <style>
        .wordcloud-container {
            width: 45%;
            height: 400px;
            display: inline-block;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="wordcloud1" class="wordcloud-container"></div>
    <div id="wordcloud2" class="wordcloud-container"></div>

    <script>
        const words1 = [
            ["Hello", 12],
            ["World", 10],
            ["Example", 8],
            // 更多单词...
        ];

        const words2 = [
            ["Data", 15],
            ["Visualization", 12],
            ["Cloud", 10],
            // 更多单词...
        ];

        WordCloud(document.getElementById('wordcloud1'), { list: words1 });
        WordCloud(document.getElementById('wordcloud2'), { list: words2 });
    </script>
</body>
</html>