Skip to content

javascript wordcloud, based on wordcloud2.js. js词云,增强特性

Notifications You must be signed in to change notification settings

liangbizhi/js2wordcloud

Repository files navigation

js2wordcloud.js

Build Github Releases MIT Licence

NPM

js2wordcloud

JavaScript生成词云图。基于wordcloud2.js

由于Baidu Echarts 2的词云图在设置值较小、值相同的词语时,会出现字符重叠的问题;而又在不能使用Ecahrts 3的情况下……

wordcloud2.js能较好解决这个问题,但某些功能仍未能满足项目需求,故在此进行二次封装,做一些微小的工作。

Installation

  • 通过script标签引入:
<script src="dist/js2wordcloud.min.js"></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

Features

  • 支持tooltip。包括tooltip的开关和数据格式化formatter;
  • 支持showLoading和hideLoading加载数据loading;
  • 支持resize;
  • 当词云数值相差过大时,对字体大小范围进行约束;
  • 更好地支持图片形状,注意点:
    • 请使用图形为纯黑色的白底图片(格式为jpg/png);
    • 如果形状显示不太完美,请不断调整fontSizeFactor, maxFontSizeminFontSize等参数;
    • 其他格式(SVG、base64等)暂不支持,请先转换为图片;

Document

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
    }
  • hideLoading()

    隐藏loading

  • resize()

    当容器大小变化时,调用此方法进行重绘

Licence

MIT

About

javascript wordcloud, based on wordcloud2.js. js词云,增强特性

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published