词云解决方案：js2wordcloud

原创

小哥 2年前 (2023-05-15) 阅读数 34 #大杂烩

JavaScript生成一个词云地图。 wordcloud2.js

GitHub传送门： Js2WordCloud

Installation：

通过 script 品牌简介:
npm安装：

npm install js2wordcloud --save

Usage：

var wc = new Js2WordCloud(document.getElementById(container))
wc.setOption({
    tooltip: {
        show: true
    },
    list: [[谈笑风生, 80], [谈笑风生, 80], [谈笑风生, 70], [谈笑风生, 70], [谈笑风生, 60], [谈笑风生, 60]],
    color: #15a4fa
})

一般使用,请参考 index.html 。点击 demo

请参阅使用图像的形状 index-shape.html 。点击 demo

API：

setOption(options)

options必须通过这API设置显示“云”这个词

在wordcloud2.js原options添加:

{
    // ...
    imageShape: https://example.com/images/shape.png,     // 提供一个图像(链接方法,仅支持)jpg/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])

转换控制、显示loading(阅读)。

loadingOption :

{
    backgroundColor: #eee,
    text: 正在加载...,
    effect: spin                      // 默认：null, { String | Function } 可选：spin|normal;也可以是一个回调函数,回调函数生成的HTML
}