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 ...
随机推荐
- 安装webpack-dev-server始终不成功
先安装了webpack,后来安装webpack-dev-server会一直出现这个问题,我把webpack提示的1.0.0 , 2.0.0 ,3.0.0全都在全局装了一遍都没用,还是会出现这个问题.最 ...
- django系列 1 :python+django环境搭建 +mac提示找不到manage.py命令
1.安装python3 2.设置python3的环境变量 3.进入命令行模式,输入 pip install django 1.10.3 4.验证是否安装完成 pip show django 5.dja ...
- Android Studio 每次运行都会再下载一遍，修改
Android Studio 每次运行都会再下载一遍 把 gradle 设置 use local gradle distribution
- threading：线程创建、启动、睡眠、退出
1.方法一:将要执行的函数作为参数传递给threading.Thread() import threading import time def func(n): global count time.s ...
- QImage与cv::Mat转换；
QImage主要格式有QImage::Format_RGB32, QImage::Format_RGB888, QImage::Format_Index8, 不同的格式有不同的排布: 格式部分可以参考 ...
- BZOJ2006 ST表 + 堆
https://www.lydsy.com/JudgeOnline/problem.php?id=2006 题意:在长度N的序列中求K段长度在L到R之间的区间,使得他们的和最大 很容易想到要求一个前缀 ...
- 设计模式---接口隔离模式之代理模式（Proxy）
一:概念 代理模式(Proxy Pattern)就是为其他对象提供一种代理以控制对这个对象的访问. 比如: 智能指针 为别人做嫁衣 所谓代理,是指具有与代理元(被代理的对象)具有相同的接口的类,客户端 ...
- "Error 0162 - Setup data integrity check failure" after updating BIOS via Thinkvantage
Start the computer and start pressing F1 and get into set up. In setup press F9 for default settings ...
- 8.Hystrix-Feign配置服务降级
项目中用到Feign调用服务端方法并做服务降级处理 1.application.properties配置: feign.hystrix.enabled=true 2.pom: <!--feign ...
- Hadoop记录-hdfs转载
Hadoop 存档 每个文件均按块存储,每个块的元数据存储在namenode的内存中,因此hadoop存储小文件会非常低效.因为大量的小文件会耗尽namenode中的大部分内存.但注意,存储小文件所需 ...