词云(wordcloud2.js js2wordcloud.js)
npm安装:
用法
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>
词云(wordcloud2.js js2wordcloud.js)的更多相关文章
- R语言︱文本挖掘——词云wordcloud2包
每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 笔者看到微信公众号探数寻理中提到郎大为Chif ...
- 使用R语言将微信记录制作成词云(简洁)--情人节奥义
一.导出并读入微信聊天记录 参照百度的方法,使用同步助手.安装同步助手--连接手机(安卓苹果均可)--点击"其他功能"--点击微信图标即可进入聊天记录导出界面(非常简单). ...
- NLP实现文本分词+在线词云实现工具
实现文本分词+在线词云实现工具 词云是NLP中比较简单而且效果较好的一种表达方式,说到可视化,R语言当仍不让,可见R语言︱文本挖掘——词云wordcloud2包 当然用代码写词云还是比较费劲的,网上也 ...
- Python之手把手教你用JS逆向爬取网易云40万+评论并用stylecloud炫酷词云进行情感分析
本文借鉴了@平胸小仙女的知乎回复 https://www.zhihu.com/question/36081767 写在前面: 文章有点长,操作有点复杂,需要代码的直接去文末即可.想要学习的需要有点耐心 ...
- js2wordcloud 词云包的使用
js文件下载: https://github.com/liangbizhi/js2wordcloud/tree/master/ dist文件夹内 引用: <script src="** ...
- R语言之词云:wordcloud&wordcloud2安装及参数说明
一.wordcloud安装说明 install.packages("wordcloud"); 二.wordcloud2安装说明 install.packages("dev ...
- 微信小程序存放视频文件到阿里云用到算法js脚本文件
peterhuang007/weixinFileToaliyun: 微信小程序存放视频文件到阿里云用到算法js脚本文件 https://github.com/peterhuang007/ ...
- echarts之词云随机颜色的配置
echarts中的词云字体产生随机颜色,最主演的是要引入worldcloud.js,另外还要有jquery.js文件与echarts.js文件的引入,通过配置即可实现词云随机颜色的产生.下面为大家介绍 ...
- echarts词云引用
最近项目中需要使用echarts的词云图,因为几经波折才引用成功,所以想记下来跟大家分享,(我的随笔不会写那么多让人需要动脑子去理解的东西,就是记录一下步骤,因为经验甚少,底层原理懂得不多,所以就先记 ...
随机推荐
- mysql having和where的区别
having子句与where子句一样,都是用于条件判断的. 区别1 where是判断数据从磁盘读入内存的时候 having是判断分组统计之前的所有条件 区别原理 区别2 having子句中可以使用字段 ...
- 经过N条边的最短路
http://acm.pku.edu.cn/JudgeOnline/problem?id=3613 求经过N条边的最短路 (2 ≤ N ≤ 1,000,000) 倍增floyd,主体是矩阵乘法.考虑一 ...
- 2019.4.10 初识puppeteer
注:原地址:https://www.cnblogs.com/paris-test/p/9705075.html 一.Puppeteer 介绍 Puppeteer 翻译是操纵木偶的人,利用这个工具,我们 ...
- IP协议号 IP首部中有8位协议号,用于指明IP的上层协议.
IP协议号 IP首部中有8位协议号,用于指明IP的上层协议. 0 HOPOPT IPv6 逐跳选项 1 ICMP Internet 控制消息 2 IGMP Internet 组管理 3 GGP 网 ...
- Windows 10 编译 OpenJDK11
下载openjdk11源码 hg clone https://hg.openjdk.java.net/jdk-updates/jdk11u-dev/
- linux磁盘大小获取和文件大小获取
一.获取磁盘大小(给入的是文件夹绝对路径):check_disk_available(QString path) { struct statfs diskinfo; unsigned long lon ...
- poj1915
#include<iostream> using namespace std; #define SIZE 305 int vis[SIZE][SIZE]; int sx,sy,ex,ey; ...
- wx.createSelectorQuery() 获取节点信息 获取不到解决方法
场景:一个气泡的宽度由加载来的数据填充所决定,不定宽, wx.createSelectorQuery().selectAll('.talkbubble').boundingClientRect ...
- spark-sql自定义函数UDF和UDAF
1 UDF对每个值进行处理: 2 UDAF对分组后的每个值处理(必须分组) SparkConf sparkConf = new SparkConf() .setMaster("local&q ...
- idea将maven项目打包成war包
1.单击红色方框处 2.在IDEA右侧出现maven project选项 3.单击maven project选项,出现Spring MVC Basic Feature菜单,选择 其中的Lifecycl ...