词云（wordcloud2.js js2wordcloud.js）

最新推荐文章于 2024-06-20 09:43:44 发布
最新推荐文章于 2024-06-20 09:43:44 发布
阅读量1.6k 收藏 1
点赞数

npm安装：

npm install js2wordcloud --save

用法

var wc = new Js2WordCloud(document.getElementById('container'))

wc.setOption({

    tooltip: {

        show: true

    },

    list: [['谈笑风生', 80], ['谈笑风生', 80], ['谈笑风生', 70], ['谈笑风生', 70], ['谈笑风生', 60], ['谈笑风生', 60]],

    color: '#15a4fa'

})

 

Document

API （https://github.com/timdream/wordcloud2.js/blob/gh-pages/API.md）

 

  • setOption(options)

    options必须通过此API进行设置，才能显示词云

    在wordcloud2.js原options基础上增加：

    {

    // ...

    imageShape: 'https://example.com/images/shape.png',     // 提供一张图片，根据其形状进行词云渲染，默认为null

    fontSizeFactor: 0.1,                                    // 当词云值相差太大，可设置此值进字体行大小微调，默认0.1

    maxFontSize: 60,                                        // 最大fontSize，用来控制weightFactor，默认60

    minFontSize: 12,                                        // 最小fontSize，用来控制weightFactor，默认12

    tooltip: {

        show: true,                                         // 默认：false

        backgroundColor: 'rgba(0, 0, 0, 0.701961)',         // 默认：'rgba(0, 0, 0, 0.701961)'

        formatter: function(item) {                         // 数据格式化函数，item为list的一项

        }

    },

    noDataLoadingOption: {                                  // 无数据提示。

        backgroundColor: '#eee',

        text: '暂无数据',

        textStyle: {

            color: '#888',

            fontSize: 14

        }

    }

    // ...

}

     

  • showLoading([loadingOption])

    过渡控制，显示loading（读取中）。可选。

    loadingOption:

    {

    backgroundColor: '#eee',

    text: '正在加载...',

    effect: 'spin'                      // 默认：null, { String | Function } 可选：'spin|normal'；也可为回调函数，回调函数生成HTML

}

    　

  • hideLoading()

    • 隐藏loading

    • resize()

      当容器大小变化时，调用此方法进行重绘

     

  • wordcloud2函数说明

    wordcloud2(data, size = 1, minSize = 0, gridSize =  0,  

    fontFamily = NULL, fontWeight = 'normal',  

    color = 'random-dark', backgroundColor = "white",  

    minRotation = -pi/4, maxRotation = pi/4, rotateRatio = 0.4,  

    shape = 'circle', ellipticity = 0.65, widgetsize = NULL)  

    常用参数：

    （1）data：词云生成数据，包含具体词语以及频率；

    （2）size：字体大小，默认为1，一般来说该值越小，生成的形状轮廓越明显；

    （3）fontFamily：字体，如‘微软雅黑’；

    （4）fontWeight：字体粗细，包含‘normal’，‘bold’以及‘600’；；

    （5）color：字体颜色，可以选择‘random-dark’以及‘random-light’，其实就是颜色色系；

    （6）backgroundColor：背景颜色，支持R语言中的常用颜色，如‘gray’，‘blcak’，但是还支持不了更加具体的颜色选择，如‘gray20’；

    （7）minRontatin与maxRontatin：字体旋转角度范围的最小值以及最大值，选定后，字体会在该范围内随机旋转；

    （8）rotationRation：字体旋转比例，如设定为1，则全部词语都会发生旋转；

    （9）shape：词云形状选择，默认是‘circle’，即圆形。还可以选择‘cardioid’（苹果形或心形），‘star’（星形），‘diamond’（钻石），‘triangle-forward’（三角形），‘triangle’（三角形），‘pentagon’（五边形）； 

  •  

    事例

  • <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Demo</title>

</head>

<style>

  #container{

    width: 1000px;

    margin: 100px auto;

    border: 1px solid #ccc;

  }

</style>

<body>

    <h1>一般</h1>

    <div id="container" style="height: 400px;"></div>

    <!-- <h1>无数据</h1>

    <div id="container1" style="height: 400px;"></div> -->

    <script src="./node_modules/js2wordcloud/dist/js2wordcloud.js"></script>

    <script>

          function   getnum(){

      return parseInt(Math.random()*100)

    }

      var arr1 = new Array(100);

      arr1[0] = ['减肥而附加费', 1]

      arr1[1] = ['v 发表观后感', 11]

      arr1[2] = ['我', 78]

      arr1[3] = ['解决国家', 18]

      arr1[4] = ['结构图然后 iu 越糊涂', 20]

      arr1[5] = ['就斤斤计较', 30]

      arr1[6] = ['的', 101]

      arr1[7] = ['给她', 100]

      arr1[8] = ['会议厅', 10]

      arr1[9] = ['非日任何个人和 u 研讨会', 90]

        for(var i=10;i<arr1.length;i++){

          var num = getnum()

            arr1[i] = ['谈笑风生', num];

        }

        console.log(arr1);

        var option = {

            // tooltip: {

            //     show: true,

            //     formatter: function(item) {

            //         return item[0] + ': 价值¥' + item[1] + '<br>' + '词云图'

            //     }

            // },

            // list: [['谈笑风生', 500], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 1000], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1]],

            list: arr1,

            color: 'random-dark',

            // shape: 'circle',

            ellipticity: 1,

            minRotation: -1.57080,

            maxRotation: -1.57080,

            rotateRatio: .4,

            fontSizeFactor: 5,                                    // 当词云值相差太大，可设置此值进字体行大小微调，默认0.1

            maxFontSize: 60,                                        // 最大fontSize，用来控制weightFactor，默认60

            minFontSize: 20,

            gridSize: 10,

            // ratationSteps: 2,

            // rotationRation: .5,

            // shuffle: 30

            // shape: 'circle',

            // cardioid: 'diamond'

            cardioid: 'square'





        }

        var wc = new Js2WordCloud(document.getElementById('container'))

        wc.setOption(option)

     

        window.onresize = function() {

            wc.resize()

        }

    </script>

</body>

</html>

     

停停停停
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
项目实训（十）词云的制作
m0_46268374的博客
06-05 900
echarts官网下架了词云图，从网上找到不同的属性修改。 2、代码 设置颜色在自定义数组中随机选取设置字体大小从15-60，翻转角度从-45-90
React前端项目生成词云图
study_way的博客
06-30 1562
词云图(word cloud)是一个常见的可视化技术，可以直观有效地反映文本主题的特征和结构。React 项目中来实现前端词云图，可以使用第三方 JavaScript 词云图库，通过 npm 安装，然后在项目中直接使用。
探索数据的视觉盛宴：Vue-wordcloud——一个灵活高效的词云组件
最新发布
gitblog_00017的博客
06-20 522
探索数据的视觉盛宴：Vue-wordcloud——一个灵活高效的词云组件 项目地址:https://gitcode.com/feifang/vue-wordcloud 在信息爆炸的时代，有效地展示关键词已成为数据分析和信息概览的重要手段。今天，我们将一同深入探索一个独特的前端宝藏——vue-wordcloud，这是一个专为Vue.js设计的词云组件，基于经典的d3-cloud插件构建，赋予了现代应...
词云 js2wordcloud.js
热门推荐
钟健的博客
06-02 7万+
词云 一、简介 “词云”拼音是cí yún，由美国西北大学新闻学副教授、新媒体专业主任里奇·戈登（Rich Gordon）于2006年最先使用。戈登做过编辑、记者，曾担任迈阿密先驱报（Miami Herald）新媒体版的主任。他一直很关注网络内容发布的最新形式——即那些只有互联网可以采用而报纸、广播、电视等其它媒体都望尘莫及的传播方式。通常，这些最新的、最适合网络的传播方式，也是最好的传播方式。 因此，“词云”就是通过形成“关键词云层”或“关键词渲染”，对网络文本中出现频率较高的“关键词”的视觉上的突出。
纯js实现词云，让标题像云彩一样动起来
weixin_42202310的博客
10-07 2196
云文字开发 效果展示 项目使用 npm install cloudword -S // 在 main.js 里面引用 import cloudWord from 'cloudWord' new cloudWord({ el: '#cloudWord', // 云文字容器 words: ['one', 'two', 'three'], colors: ['red', 'yellow', 'green'], onClick(elem) { console.log('点击的文字信息：
【VUE】VUE项目中使用Js2WordCloud实现自定义形状的词云图效果
EchoooZhang的博客
03-10 3964
【VUE】VUE中词云图实现(Js2WordCloud 词云安装用法) 词云图一直用echarts和D3，昨天想在Vue里用一下，发现echarts-cloud的词云好像不太支持，Echarts官网里的词云DEMO也显示不出。办法总比问题多，懒惰让我放弃研究，直接用了以前用过的Js2WordCloud，在VUE里实现了下，其实比较强推这个，我觉得他的可以自定义Imagemask和可以设置时间慢慢渲...
echarts-wordcloud.min.js
06-23
EChars可视化工具词云图的js
echarts-wordcloud.js词云图插件
05-16
echarts制作词云图需要的文件 ECharts 的词云图是一个插件类型的图表。在 ECharts 官网下载的完整版本不包含词云图，使用时，需要在引入 echarts.js 之后，另外引入词云图对应的 echarts-wordcloud.js
python使用wordcloud定制词云
l_l_c_q的博客
05-31 900
python使用wordcloud定制词云
wordcloud参数
yaochuyi的博客
04-26 2001
wordcloud参数
词云（标签云）demo
06-27
词云（标签云）demo 源码下载：http://down.alixixi.com 模板下载：http://mb.alixixi.com 电子书籍：http://book.alixixi.com 网页特效：http://js.alixixi.com 韩国酷站：http://cool.alixixi.com/ 技术论坛：http://bbs.alixixi.com
D3.js实现文字云效果 例子
11-01
这是一个用D3实现文字云的简单案例。可以参考，学习。如果存在不足的的地方可以优化，再跟大家分享，相互学习
echarts字符云（词云）
xiaojing的博客
10-21 5万+
下面是一个小鸟形状的词云，可以在iconfont中下载（最好是填充的）图案，转为base64，就可以用来生成有图案的词云了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WordCloud Demo</title&gt...
js实现字体大小设置
我的博客
02-25 5158
1、实现代码： // el - 要设置字体的最外层元素，size - 字体大小，单位px function setFontSize (el, size) { // 获取元素el下的所有元素nodes const nodesObj = el.getElementsByTagName("*") const nodes = Object.values(nodesObj) nodes.forEach(node => { node.style.fontSize = size + "p
java+vue实现词云生成+展示（kumo+echarts-wordcloud ）
Silas 蝈蝈 博客
11-23 1万+
好久没有写过博客了最近项目上的事情弄的很焦灼，最近有点空闲的时间就把项目中学到的东西多多的总结一下，这个词云是我之前写过的一些功能，当时是有一个这个需求自己搜集了一些可以用到的依赖和三方的包，好了话不多说直接开整，先整一张图 前端页面：词云效果图 当然也可以是： 首先呢：先从后端说起 后端采用了Kumo一个开源的Java词云工具，可以快速构建词云图片。 开源地址 Github：https://github.com/kennycason/kumo 码云：https:/...
python输出字体的大小_python小白零基础词云快速上手指南
weixin_39605414的博客
11-08 584
上一篇我们以马云的微博为例，介绍了如何使用requests将马云的所有微博爬下来(传送门：马云这些年在微博上都说过些什么——小白python爬虫实战(1))，爬下来之后，我们最终想要得到的是一个像下图一样的词云↓那么词云该怎么做呢？还是以上篇文章爬出来的马老板的全部微博文本jackma.txt为例。先从最朴素的词云开始：像上图这样的词云，还没有特定的图案和花里胡哨的展示方式，这是怎么做出...
python 标签字体大小_手把手教你零基础制作酷炫的词云（标签云）
weixin_32431067的博客
12-07 1187
本文重点以优词云为例介绍词云的制作。很多时候，我们需要用炫酷的词云或者标签云来表达文本的重点含义。但是大多数工具都需要一定的编程基础，需要python来处理。而国外虽然有很多词云工具，但是对中文支持不够友好。今天重点介绍优词云。优词云页面非常简单，支持字体选择，支持词语大小调整，支持字体颜色，背景颜色的自定义。最最最重要的是，有很多好玩的模版供选择。来，快速进入 优词云www.uciyun.com...
highcharts词云部分字体过小
杰克拉乌的博客
05-10 2939
在highcharts使用中，会发现有的字非常小。如图原因是你的数据问题。如图。series里的data.里面对象的weight属性值相差太大。建议加一个数，缩小数据之前的倍数差...
echarts-wordcloud.min.js 下载
07-14
### 回答1： Echarts-wordcloud.min.js是一个用于生成词云图的JavaScript库，可以用于数据可视化和图表展示。要进行echarts-wordcloud.min.js的下载，可以按照以下步骤进行： 1. 打开一个浏览器，进入Echarts的官方网站（https://echarts.apache.org/）。 2. 在官方网站的首页上，点击“下载”或者“Download”按钮。这个按钮一般会位于页面的顶部或者导航栏上方。 3. 进入下载页面后，可以看到有多个可选的下载版本和文件类型。找到名为“echarts-wordcloud”的相关文件，通常是一个.js文件。 4. 点击该文件的下载链接或者按钮，浏览器将会开始下载该文件。 5. 下载完成后，可以在本地计算机的特定文件夹中找到下载好的echarts-wordcloud.min.js文件。 需要注意的是，为了确保下载的文件是最新版本，建议在官方网站上进行下载。此外，还可以在官方网站上找到相关的使用文档和示例代码，以便更好地理解和应用echarts-wordcloud.min.js库。 ### 回答2： echarts-wordcloud.min.js是一个用于生成词云图的JavaScript库。要下载echarts-wordcloud.min.js，您可以按照以下步骤操作： 1. 打开您的浏览器，并访问echarts-wordcloud.min.js的官方网站或者开源库的托管网站，如GitHub。 2. 在网站的搜索栏中输入"echarts-wordcloud.min.js"或类似的关键词进行搜索。 3. 在搜索结果中找到与您所需版本匹配的echarts-wordcloud.min.js，并点击下载按钮或链接。 4. 在弹出窗口中选择保存文件的位置，并点击"保存"按钮。 5. 等待下载完成。 6. 下载完成后，您可以将echarts-wordcloud.min.js文件拷贝到您的项目文件夹中，然后通过在HTML文件中引入该文件的方式来使用。 例如，在您的HTML文件的<head>标签中添加以下代码： ```html <script src="path/to/echarts-wordcloud.min.js"></script> ``` 请注意，"path/to/echarts-wordcloud.min.js"应该替换为您实际保存文件的路径。 下载完成后，您将能够在您的网页或应用程序中使用echarts-wordcloud.min.js库来生成漂亮的词云图。如果您需要了解更多关于echarts-wordcloud.min.js的使用方法，请参考官方文档或示例代码。 ### 回答3： echarts-wordcloud.min.js 是一个 Echarts 的插件，用于生成词云图表。如果需要使用这个插件，可以通过以下步骤进行下载： 1. 打开 Echarts 官方网站（https://echarts.apache.org/zh/index.html）。 2. 在导航菜单中找到 "下载" 或 "下载 Echarts"，点击进入下载页面。 3. 在下载页面上，可以找到一个 "ECharts 散点图组件（echarts-wordcloud）" 的链接，点击进入该页面。 4. 在该页面上，可以找到下载链接，点击链接即可开始下载 echarts-wordcloud.min.js 文件。 5. 下载完成后，将下载得到的 echarts-wordcloud.min.js 文件保存到自己的项目文件夹中。 需要注意的是，使用 echarts-wordcloud.min.js 之前，需要确保已经引入了 Echarts 的主文件，以及相关的依赖库，如 echarts.min.js 等。此外，需要根据具体项目需求进行配置和使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值