js2wordcloud 词云包的使用

js文件下载：

https://github.com/liangbizhi/js2wordcloud/tree/master/

dist文件夹内

引用:

<script src="****/js2wordcloud.min.js"></script>

用法：

html标签body的内部新建一个div， id设置为container

<div id="container"></div>

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

#当然这里也可以改成 var wc = new Js2WordCloud($('container')[0])

wc.setOption({

    tooltip: {

        show: true

    },

    list: [['谈笑风生', ], ['谈笑风生', ], ['谈笑风生', ], ['谈笑风生', ], ['谈笑风生', ], ['谈笑风生', ]],

    color: '#15a4fa'

})

demo

API

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()

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

demo调用源码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Demo</title>

</head>

<body>

    <h1>一般</h1>

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

    <h1>无数据</h1>

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

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

    <script>

        var option = {

            tooltip: {

                show: true,

                formatter: function(item) {

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

                }

            },

            list: [['谈笑风生', 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], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1]],

            // list:[["玻璃瓶",941],["塑料瓶",15],["易拉罐",3]],

            color: '#15a4fa',

            shape: 'circle',

            ellipticity: 1

        }

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

        wc.showLoading({

            backgroundColor: '#fff',

            text: '看见了福建省的附件里是卡洛斯的家乐福就爱上了克拉家乐福及爱丽丝垃圾堆里发简历到复健科了会计师两地分居阿里拉客积分的垃圾费浪费据了解乐山大佛',

            effect: 'spin'

        })

        setTimeout(function() {

            wc.hideLoading()

            wc.setOption(option)

        }, 2000)

        setTimeout(function() {

            wc.setOption({

                noDataLoadingOption: {

                    backgroundColor: '#f00',

                    text: '暂无数据'

                }

            })

        }, 4000)

        setTimeout(function() {

            wc.setOption(option)

        }, 6000)

        /////////////////

        var option1 = {

            color: '#15a4fa',

            noDataLoadingOption: {

                backgroundColor: '#eee',

                text: '暂无数据',

                textStyle: {

                    color: '#f00',

                    fontSize: 20

                }

            }

        }

        var wc1 = new Js2WordCloud(document.getElementById('container1'))

        wc1.showLoading()

        setTimeout(function() {

            wc1.hideLoading()

            wc1.setOption(option1)

        }, 2000)

        var option8 = {

            tooltip: {

                show: true,

                formatter: function(item) {

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

                }

            },

            list: [['华莱士', 500000], ['华莱士', 50], ['华莱士', 40], ['华莱士', 40], ['华莱士', 30], ['华莱士', 30], ['华莱士', 20], ['华莱士', 20], ['华莱士', 1], ['华莱士', 1]],

            color: 'red'

        }

        setTimeout(function() {

            wc1.setOption(option8)

        }, 4000)

        window.onresize = function() {

            wc.resize()

            wc1.resize()

        }

    </script>

</body>

</html>

js2wordcloud 词云包的使用的更多相关文章

Js2WordCloud 词云用法
1.引入 npm 安装: npm install js2wordcloud --save 通过script引入: <script src="dist/js2wordcloud.min. ...
WordCloud词云包的安装
1,下载 https://www.lfd.uci.edu/~gohlke/pythonlibs/#wordcloud 2,安装 (window环境安装) 找的下载文件的路径安装 pip instal ...
windows下python 正确安装词云包wordcloud的方法
安装wordcloud的时候果然还是出现了问题,试了网上说的好多办法,最后找到了一种成功率高的,可以优先尝试一下下载.whl文件http://www.lfd.uci.edu/~gohlke/pyth ...
用Python玩转词云
第一步:引入相关的库包: #coding:utf-8 __author__ = 'Administrator' import jieba #分词包 import numpy #numpy计算包 imp ...
如何用Python做词云（收藏）
看过之后你有什么感觉?想不想自己做一张出来? 如果你的答案是肯定的,我们就不要拖延了,今天就来一步步从零开始做个词云分析图.当然,做为基础的词云图,肯定比不上刚才那两张信息图酷炫.不过不要紧,好的开始 ...
python爬虫——词云分析最热门电影《后来的我们》
1 模块库使用说明 1.1 requests库 requests 是用Python语言编写,基于 urllib,采用 Apache2 Licensed 开源协议的 HTTP 库.它比 urllib 更 ...
用Python爬虫对豆瓣《敦刻尔克》影评进行词云展示
最近很想看的一个电影,去知乎上看一下评论,刚好在学Python爬虫,就做个小实例. 代码基于第三方修改原文链接 http://python.jobbole.com/88325/#comment-9 ...
R语言︱文本挖掘——词云wordcloud2包
每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 笔者看到微信公众号探数寻理中提到郎大为Chif ...
词云（wordcloud2.js js2wordcloud.js）
npm安装: npm install js2wordcloud --save 用法 var wc = new Js2WordCloud(document.getElementById('contain ...

随机推荐

python之设计模式
一.简介设计模式的定义:为了解决面向对象系统中重要和重复的设计封装在一起的一种代码实现框架,可以使得代码更加易于扩展和调用四个基本要素:模式名称,问题,解决方案,效果六大原则: 1.开闭原则:一 ...
java利用线程池处理集合
java利用线程池处理集合 2018年07月23日 17:21:19 衍夏成歌阅读数:866 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/s ...
js怎么获取微信浏览器内容的高度
通过window对象来得到窗口相关的内外款高度信息,如下: outerHeight属性设置或返回一个窗口的外部高度,包括所有界面元素(如工具栏/滚动条).outerWidth属性设置或返回窗口的外部宽 ...
jenkins发版svn
1.在mac上直接安装Jenkins,下载地址 : 2.安装插件:系统管理-->插件管理 publish over ssh Exec command: cd /usr/local/apache- ...
python自动化开发-[第十三天]-javascript
今日概要 1.javascript简单语法 1.javascript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名S ...
字符设备驱动(六)按键poll机制
title: 字符设备驱动(六)按键poll机制 tags: linux date: 2018-11-23 18:57:40 toc: true --- 字符设备驱动(六)按键poll机制引入在字 ...
JavaSE_List&Array_Java1.7
这里简单写了下List和Array的相互转换 package cn.rocker.collection.list; import org.junit.Test; import java.util.Ar ...
Windows-kms
系统下载 Windows 长期服务版 Windows 10 Enterprise LTSC 2019 (x64) - DVD (Chinese-Simplified) 文件名 cn_windows_1 ...
【转】C语言中的符号优先级
转自: http://blog.csdn.net/huangblog/article/details/8271791 虽然在日常使用中,添加括号来明确规定运算符优先级是一种常识,但毕竟学校考试就喜欢考 ...
不存数据库的token验证
不需要数据库存,纯粹通过计算来判断是否相等 {name:chuck,id:1}|自己加密方式加密后的内容截取加密内容,反解,判断反解内容与{name:chuck,id:1}是否相同,只会耗费计算资源 ...

js2wordcloud 词云包的使用

js2wordcloud 词云包的使用的更多相关文章

随机推荐

热门专题