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 ...
随机推荐
- python基础-守护进程、守护线程、守护非守护并行
守护进程 1.守护子进程 主进程创建守护进程 其一:守护进程会在主进程代码执行结束后就终止 其二:守护进程内无法再开启子进程,否则抛出异常:AssertionError: daemonic pro ...
- io系列之字节流
java中io流系统庞大,知识点众多,作为小白通过五天的视频书籍学习后,总结了io系列的随笔,以便将来复习查看. 本篇为此系列随笔的第一篇:io系列之字节流. 一.字节流的File读写操作. Inpu ...
- selenium-网站demo学习-test Design-优化自动化代码
看selenium的网站的文档,里面的自动化用例设计有一些小点很靠谱.学了很多,可以用作优化自己的代码. 1.测试类型: Testing Static Content Testing Links Fu ...
- c#Linq联合查询
public void Test2() { var queryResult1 = from e in empArray from l in empLevelArray select new { e, ...
- linux driver ------ 字符设备驱动 之 “ 创建设备节点流程 ”
在字符设备驱动开发的入门教程中,最常见的就是用device_create()函数来创建设备节点了,但是在之后阅读内核源码的过程中却很少见device_create()的踪影了,取而代之的是device ...
- 2017-12-15python全栈9期第二天第七节之x or y ,x 为 非 0时，则返回x
#!/user/bin/python# -*- coding:utf-8 -*-# x or y ,x 为 非 0时,则返回xprint(1 or 2)print(3 or 2)print(0 or ...
- Spring Boot项目中的字体文件问题_Failed to decode downloaded font
1.问题:字体文件加载失败,本来应该是“X”号,现在只有一个小方块 2.原因:问题是Maven正在过滤字体文件并破坏它们. <resource> <filtering>true ...
- nginx之代理websocket
nginx代理websocket:NGINX通过允许一个在客户端和后端服务器之间建立的隧道来支持WebSocket.为了NGINX发送来至于客户端Upgrade请求到后端服务器,Upgrade和Con ...
- 【.NET】asp.net Redirect 图片路径
#需求: 前端通过<img>的src向服务端请求图片信息,如果不存在想要的图片,那么就返回一张默认路径下的图片: #实现: <img class="related_reso ...
- HTML5 accesskey的用法
<button onclick="start()" accesskey="s">开始</button> <button oncli ...