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)的更多相关文章

  1. R语言︱文本挖掘——词云wordcloud2包

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 笔者看到微信公众号探数寻理中提到郎大为Chif ...

  2. 使用R语言将微信记录制作成词云(简洁)--情人节奥义

    一.导出并读入微信聊天记录     参照百度的方法,使用同步助手.安装同步助手--连接手机(安卓苹果均可)--点击"其他功能"--点击微信图标即可进入聊天记录导出界面(非常简单). ...

  3. NLP实现文本分词+在线词云实现工具

    实现文本分词+在线词云实现工具 词云是NLP中比较简单而且效果较好的一种表达方式,说到可视化,R语言当仍不让,可见R语言︱文本挖掘——词云wordcloud2包 当然用代码写词云还是比较费劲的,网上也 ...

  4. Python之手把手教你用JS逆向爬取网易云40万+评论并用stylecloud炫酷词云进行情感分析

    本文借鉴了@平胸小仙女的知乎回复 https://www.zhihu.com/question/36081767 写在前面: 文章有点长,操作有点复杂,需要代码的直接去文末即可.想要学习的需要有点耐心 ...

  5. js2wordcloud 词云包的使用

    js文件下载: https://github.com/liangbizhi/js2wordcloud/tree/master/ dist文件夹内 引用: <script src="** ...

  6. R语言之词云:wordcloud&wordcloud2安装及参数说明

    一.wordcloud安装说明 install.packages("wordcloud"); 二.wordcloud2安装说明 install.packages("dev ...

  7. 微信小程序存放视频文件到阿里云用到算法js脚本文件

           peterhuang007/weixinFileToaliyun: 微信小程序存放视频文件到阿里云用到算法js脚本文件 https://github.com/peterhuang007/ ...

  8. echarts之词云随机颜色的配置

    echarts中的词云字体产生随机颜色,最主演的是要引入worldcloud.js,另外还要有jquery.js文件与echarts.js文件的引入,通过配置即可实现词云随机颜色的产生.下面为大家介绍 ...

  9. echarts词云引用

    最近项目中需要使用echarts的词云图,因为几经波折才引用成功,所以想记下来跟大家分享,(我的随笔不会写那么多让人需要动脑子去理解的东西,就是记录一下步骤,因为经验甚少,底层原理懂得不多,所以就先记 ...

随机推荐

  1. mysql having和where的区别

    having子句与where子句一样,都是用于条件判断的. 区别1 where是判断数据从磁盘读入内存的时候 having是判断分组统计之前的所有条件 区别原理 区别2 having子句中可以使用字段 ...

  2. 经过N条边的最短路

    http://acm.pku.edu.cn/JudgeOnline/problem?id=3613 求经过N条边的最短路 (2 ≤ N ≤ 1,000,000) 倍增floyd,主体是矩阵乘法.考虑一 ...

  3. 2019.4.10 初识puppeteer

    注:原地址:https://www.cnblogs.com/paris-test/p/9705075.html 一.Puppeteer 介绍 Puppeteer 翻译是操纵木偶的人,利用这个工具,我们 ...

  4. IP协议号 IP首部中有8位协议号,用于指明IP的上层协议.

    IP协议号   IP首部中有8位协议号,用于指明IP的上层协议. 0 HOPOPT IPv6 逐跳选项 1 ICMP Internet 控制消息 2 IGMP Internet 组管理 3 GGP 网 ...

  5. Windows 10 编译 OpenJDK11

    下载openjdk11源码 hg clone https://hg.openjdk.java.net/jdk-updates/jdk11u-dev/

  6. linux磁盘大小获取和文件大小获取

    一.获取磁盘大小(给入的是文件夹绝对路径):check_disk_available(QString path) { struct statfs diskinfo; unsigned long lon ...

  7. poj1915

    #include<iostream> using namespace std; #define SIZE 305 int vis[SIZE][SIZE]; int sx,sy,ex,ey; ...

  8. wx.createSelectorQuery() 获取节点信息 获取不到解决方法

    场景:一个气泡的宽度由加载来的数据填充所决定,不定宽,     wx.createSelectorQuery().selectAll('.talkbubble').boundingClientRect ...

  9. spark-sql自定义函数UDF和UDAF

    1 UDF对每个值进行处理: 2 UDAF对分组后的每个值处理(必须分组) SparkConf sparkConf = new SparkConf() .setMaster("local&q ...

  10. idea将maven项目打包成war包

    1.单击红色方框处 2.在IDEA右侧出现maven project选项 3.单击maven project选项,出现Spring MVC Basic Feature菜单,选择 其中的Lifecycl ...