詞雲（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函數說明