词云（wordcloud2.js js2wordcloud.js）

时间 2019-11-08

标签 wordcloud2.js wordcloud js2wordcloud.js 栏目 JavaScript 繁體版

原文原文链接

npm安装：javascript

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)html

options必须经过此API进行设置，才能显示词云java

在wordcloud2.js原options基础上增长：node

{
    // ...
    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])git

过渡控制，显示loading（读取中）。可选。github

loadingOption:shell

{
    backgroundColor: '#eee',
    text: '正在加载...',
    effect: 'spin'                      // 默认：null, { String | Function } 可选：'spin|normal'；也可为回调函数，回调函数生成HTML
}

hideLoading()npm
- 隐藏loadingapi
- resize()dom
  
  当容器大小变化时，调用此方法进行重绘
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）

用法

Document

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

wordcloud2函数说明