词云（wordcloud2.js js2wordcloud.js）

npm安装：

npm install js2wordcloud --save

用法

var wc = new Js2WordCloud(document.getElementById('container'))

wc.setOption({

tooltip: {

show: true

list: [['谈笑风生', 80], ['谈笑风生', 80], ['谈笑风生', 70], ['谈笑风生', 70], ['谈笑风生', 60], ['谈笑风生', 60]],

color: '#15a4fa'

})

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项目中启动Tomcat报错invalid LOC header
原因: 可能是jar包有问题. 解决方法: 1.找到加载不了的类对应的jar包. 2.在tomcat中webapps/INF/lib中找到对应的jar包,然后删除. 3.重新下载其它版本的jar包. ...
第三周学习java第四章学习总结及体会！
第三周java 2第四章的学习总结: 一.主要内容(类与对象): 1.类: 2.构造方法与对象的创建: 3.类与程序的基本结构: 4.参数传值: 5.对象的组合: 6.实例成员与类成员: 7.方法重载 ...
js 类
---恢复内容开始--- <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset ...
java中String常量的存储原理
相关题目(运行结果在代码注释后面) 1. package StringTest; public class test1 { public static void main(String[] args) ...
UIPullRefreshFlash模块demo示例
UIPullRefreshFlash 模块概述:UIPullRefreshFlash模块对引擎新推出的下拉刷新接口进行了一层封装,app可以通过此模块来实现带炫酷动画效果的下拉刷新功能.使用此模块,在 ...
《HTTP - 跨域》
本文参考 HTTP访问控制(CORS) 一:什么是跨域? - 所谓跨域, 是浏览器为了保护网站安全而建立的一种保护策略,既浏览器的同源策略. - 意味着使用这些API的Web应用程序只能从加载应用程序 ...
自学传说中的php接口编写
一个前端学php,感觉不可思议,但实际上面试中都会问你后台会不会.这时候php就派上用场了. 下面的是我自己百度研究的一个些心得分享一下: html代码 <!DOCTYPE html> & ...
（4.11）mysql备份还原——mysql闪回技术（基于binlog）
0.闪回技术与工具简介 mysql闪回工具比较流行三大类: [0.1]官方的mysqlbinlog:支持数据库在线/离线,用脚本处理binlog的输出,转化成对应SQL再执行.通用性不好,对正则.se ...
基于RAP(Mock)实现前后端分离开发
看看RAP的官方定义: 什么是RAP? (Rigel API Platform) 在前后端分离的开发模式下,我们通常需要定义一份接口文档来规范接口的具体信息.如一个请求的地址.有几个参数.参数名称及类 ...
Py之any函数【转载】
转自:http://www.runoob.com/python/python-func-any.html 1.any() 函数用于判断给定的可迭代参数 iterable 是否全部为 False,则返回 ...

词云（wordcloud2.js js2wordcloud.js）

用法

Document

API （https://github.com/timdream/wordcloud2.js/blob/gh-pages/API.md）

wordcloud2函数说明

词云（wordcloud2.js js2wordcloud.js）的更多相关文章

随机推荐

热门专题