词云（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的词云图,因为几经波折才引用成功,所以想记下来跟大家分享,(我的随笔不会写那么多让人需要动脑子去理解的东西,就是记录一下步骤,因为经验甚少,底层原理懂得不多,所以就先记 ...
随机推荐
- 全排列筛选（java）
蓝桥杯-全排列筛选(java) 蓝桥杯每年必考全排列筛选,一般为填空题: 可以使用for循环暴力破解,但是代码相对较长,也比较乱,不建议使用: 这里使用递归来解决,代码量相对较少,也很好理解: 如下为 ...
- css3 属性
1.css 面试题: css 组成: css 样式组成 规则:选择器+声明块 声明块:css属性+css属性值 2.css 解析规则: 从右往左 3.文字超出省略号显示: 1.元素不是内联块 2.ov ...
- 黑盒测试实践-day02
一.任务进展情况 了解测试环境,分析测试步骤. 二.存在的问题 对测试软件还不是很了解 三.解决方法 主要查看网上资料,请求同学帮助 四.下一步计划 先熟悉测试软件,然后进行下一步.
- DTcms 模版用vs2015或2017 打开编辑时候 粘贴出问题 代码被调整
因为模版语言不是标准的HTML格式 ,所以HTML粘帖的时候会格式化 导致原标签出问题,这里修改下就可以了
- 前台js根据当前时间生成订单号
*********前台显示框**************** <input type="text" id="WIDout_trade_no" name=& ...
- Selenium 3----WebDriver常用方法
在学会定位元素的基础上,进行元素的操作. WebDriver常用方法: clear(): 清除文本. send_keys (value): 模拟按键输入. click(): 单击元素. submit( ...
- android 自定义Button,抛弃写shape文件
标签: android 控件 自定义 2017年05月27日 17:52:13 611人阅读 评论(0) 收藏 举报 分类: 自定义View(2) 作者同类文章 X 版权声明:本文为博主原创文章 ...
- LeetCode 70 - 爬楼梯 - [递推+滚动优化]
假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 示例 1: 输入: 2输出: 2解释: 有两种方 ...
- subline text3 安装 rem装换工具
CSSREM 一个CSS的px值转rem值的Sublime Text 3自动完成插件. 插件效果如下: 安装 下载本项目,比如:git clone https://github.com/flashli ...
- win7系统64位配置Oracle 的ODBC数据源
1.安装oracle客户端 2.在如下路径启动odbc数据源 3.选择系统DSN-添加,选择oracle驱动 4.填写信息如下,填写数据源名称等信息后输入用户名和密码测试连接