wordcloud2.js简易使⽤⽅法总结
最近没事⾃⼰做了⼀个词云⼯具,主要⽤来对粘贴的⽂本或者推送的⽂章进⾏抓取后的分词结果进⾏展⽰。⼤概效果是这样的。
抓取的内容分词结果展⽰
那么就下来就简单介绍下我是如何使⽤woldcloud2.js的
1.wordcloud
2.js下载()如何下载javascript
2.下载之后导⼊wordcloud2.js到我们的⽹页
<script type="text/javascript" src="/static/lib/wordcloud2/wordcloud2.js"></script>
3.放置容器
<body>
<div id="canvas-container" >
<canvas id="canvas" width="800px" height="600px"></canvas>
</div>
</body>
4.初始化(完成)
<script>
var wordFreqData = [['各位观众',45],['词云', 21],['来啦',13]];
var canvas = ElementById('canvas');
var options = eval({
"list": wordFreqData,//或者[['各位观众',45],['词云', 21],['来啦',13]],只要格式满⾜这样都可以
"gridSize": 6, // 密集程度数字越⼩越密集
"weightFactor": 1, // 字体⼤⼩=原始⼤⼩*weightFactor
"maxFontSize": 60, //最⼤字号
"minFontSize": 14, //最⼩字号
"fontWeight": 'normal', //字体粗细
"fontFamily": 'Times, serif', // 字体
"color": 'random-light', // 字体颜⾊ 'random-dark' 或者 'random-light'
"backgroundColor": '#333', // 背景颜⾊
"rotateRatio": 1 // 字体倾斜(旋转)概率,1代表总是倾斜(旋转)
});
//⽣成
WordCloud(canvas, options);
</script>
5.扩展
如果后台返回的不是wordcloud需要的数组数据⽽是json数组的话那么需要转换⼀下,我是⽤的如下⽅法转换的
//后台返回的json数组类似{"code":200,"data":[{"word":"技术","freq":65},{"word":"蚂蚁","freq":64},{"word":"业务","freq":63}]}    var wordFreqs = result.data;
var wordFreqData = new Array();
for (var i = 0; i < wordFreqs.length; i++) {
var option = [wordFreqs[i].word, wordFreqs[i].freq];
wordFreqData.push(option);
}
//这样最后得到的wordFreqData可以直接给wordcloud使⽤了
好了,wordcloud的使⽤⽅法到这⾥基本就没有了,如果还有什么其他疑问的可以私信我。或者来我的⼩站逛逛。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。