码迷,mamicode.com
首页 > Web开发 > 详细

Js2WordCloud 词云用法

时间:2019-01-03 16:39:24      阅读:1057      评论:0      收藏:0      [点我收藏+]

标签:mit   pack   center   iter   nts   www.   end   require   nbsp   

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 词云用法

标签:mit   pack   center   iter   nts   www.   end   require   nbsp   

原文地址:https://www.cnblogs.com/peter-web/p/10214538.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!