Js2WordCloud 词云用法

Posted yang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Js2WordCloud 词云用法相关的知识，希望对你有一定的参考价值。

1、引入

　　npm 安装：

　　npm install js2wordcloud --save

　　通过script引入：

　　<script src="dist/js2wordcloud.min.js"></script>

2、用法类似如下



html：


　<div id="friendsWordCloud" class="friends-word-cloud"></div>



js：
var wc = new Js2WordCloud(document.getElementById(‘friendsWordCloud‘)); //容器
    wc.setOption({
        tooltip: {
         　show: false, // 默认：false
           backgroundColor: ‘rgba(0, 0, 0, 0.701961)‘,
           formatter: function(item) {
               if (item[1] > 12) {
                   document.querySelector(‘.__wc_tooltip__‘).style.backgroundColor = ‘rgba(0, 0, 0, 0.701961)‘;
                   return item[0] + ‘：‘ + item[2];
               } else {
                   document.querySelector(‘.__wc_tooltip__‘).style.backgroundColor = ‘transparent‘;
                   return ‘‘;
             　}
           }
        },
        list: [[‘谈笑风生‘, 80], [‘谈笑风生‘, 80]],
        gridSize: 6,
        fontSizeFactor: 0.1,
        maxFontSize: 36,
        minFontSize: 12,
        rotationSteps: 30,
        rotateRatio: 0.5,
        ellipticity: 1,
        wait: 10,
        abortThreshold: 2000,
        color(word, weight, fontSize, distance, theta) { //自定义颜色
             if (weight == 12) {
                 return ‘#DDDDDD‘;
             } else {
                 if (_this.colorIndex >= 6) {
                      _this.colorIndex = -1;
                 }
                 _this.colorIndex += 1;
                 return _this.colors[_this.colorIndex];
             }
        },
        backgroundColor: ‘rgba(255, 255, 255, 0)‘,
        imageShape: require(‘@/assets/images/data-center/man.png‘), //支持自定义图形
        click(item, dimension, event) { //支持点击事件
              _this.showTip = false;
              if (item.length > 0 && (item[1] > 12)) {
                   Toast({
                       message: item[0] + ‘：‘ + item[2] + ‘人‘
                   });
              }
        }
  });






 


具体API可以参考以下路径：


文档地址：https://github.com/timdream/wordcloud2.js/blob/gh-pages/API.md


新增加特性： https://www.npmjs.com/package/js2wordcloud


图形生成器：https://wordcloud2-js.timdream.org/shape-generator.html




以上是关于Js2WordCloud 词云用法的主要内容，如果未能解决你的问题，请参考以下文章
 

 词云可视化：四行代码从入门到精通


 SQL Select 语句的用法


 [python] 词云：wordcloud包的安装使用原理（源码分析）中文词云生成代码重写


 词云制作没那么难，Python 10 行代码就实现了！


 词云代码


 使用python绘制词云