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'
})
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 ...
随机推荐
- Linux常用基本命令(less)
转: Linux常用基本命令(less) LESS:跟more命令的功能类似,都是用于分页显示内容,但是他的性能比more更高,功能比more更丰富,他读取文件是按需加载 格式: less [opti ...
- Day23--Python--常用模块02--序列化,configparser
1. 序列化 把对象打散成bytes或者字符串. 方便存储和传输 序列化 把bytes或者字符串转换回对象. 反序列化 2. pickle(比较重要) 把python中所有的对象都可以转化成bytes ...
- postgresql安装概览
先从官网下载解压包:https://www.enterprisedb.com/download-postgresql-binaries 这种是解压后,进行配置就可以使用. 另外一种是要用./confi ...
- python之路入门篇
一. Python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,Guido开始写能够解释Python语言语法的解释器.Python这个名字,来 ...
- python学习笔记——字典操作
修改 a={'add':"shanghao","name":"zhangdong"} a['name']='zhangsan' 添加 a={ ...
- Redis分布式锁----悲观锁实现,以秒杀系统为例
摘要:本文要实现的是一种使用redis来实现分布式锁. 1.分布式锁 分布式锁在是一种用来安全访问分式式机器上变量的安全方案,一般用在全局id生成,秒杀系统,全局变量共享.分布式事务等.一般会有两种实 ...
- docker的使用 -- windows
1. 下载docker desktop https://www.docker.com/products/docker-desktop 更多操作指令 ps: 值得注意的是,刚下载下来的docker只能在 ...
- PubMed数据下载
目标站点分析 目标:抓取页面中的机构名称,日期,标题,作者, 作者信息, 摘要 程序实现 # -*- coding: utf-8 -*- """ @Datetime: 2 ...
- ansible playbook 变量
变量优先级 在命令中定义的变量(-e参数指定的) 在inventory中定义的变量(ansible_ssh_user等) 其他变量(role中.play中) 系统通过father_facts定义的变量 ...
- Kafka权威指南 读书笔记之（五）深入Kafka
集中讨论以下3 个有意思的话题 :• Kafka 如何进行复制:• Kafka 如何处理来自生产者和消费者的请求 :• Kafka 的存储细节,比如文件格式和索引. 集群成员关系 Kafka 使用 Z ...