js wordcloud 词云图, 基于wordcloud2

b2wordcloud

基于wordcloud2.js生成2D词云图

扩展特性若干，如tooltip，渐变色，阴影等

新增词云大小自适应计算算法，差异化高频词，优化形状渲染逻辑

简单线上演示 DEMO

渐变+阴影+形状+自定义tooltip位置+点击高亮演示 DEMO

Installtion 通过script引入

<script src="dist/b2wordcloud.min.js"></script> 通过npm安装

npm install b2wordcloud --save Usage

var wordCloud = new B2wordcloud(document.getElementById("chart"), { list: [ ['foo', 36], ['bar', 62], ['foo3', 22], ['bar4', 36], ['bar5', 46],['foo', 36], ['bar', 62], ['foo3', 22], ['bar4', 36], ['bar5', 46],['foo', 36], ['bar', 62], ['foo3', 22], ['bar4', 36], ['bar5', 46],['foo', 36], ['bar', 62], ['foo3', 22], ['bar4', 36], ['bar5', 46],['foo', 36], ['bar', 62], ['foo3', 22], ['bar4', 36], ['bar5', 46],['foo', 36], ['bar', 62], ['foo3', 22], ['bar4', 36], ['bar5', 46],['foo', 36], ['bar', 62], ['foo3', 22], ['bar4', 36], ['bar5', 46],['foo', 36], ['bar', 62], ['foo3', 22], ['bar4', 36], ['bar5', 46],['foo', 36], ['bar', 62], ['foo3', 22], ['bar4', 36], ['bar5', 46],['foo', 36], ['bar', 62], ['foo3', 22], ['bar4', 36], ['bar5', 46] ], tooltip: { show: true, formatter: function(item) { return '<div>' + item[0] + '</div>' + '<div>' + item[1] + '</div>' } }, shadowColor: 'rgba(0,0,0,0.9)', shadowOffsetX: 2, shadowOffsetY: 2, shadowBlur: 5, color: [ ['#f00', '#ff0'], '#f00', 'green', '#333', 'blue', ['blue', 'white'] ] }) API documentation

基于wordcloud2进行开发，因此基础API在此不重复描述，如有查看需要，可查看wordcloud2 API documentation

-以下为新增或有改动的配置项

options weightFactor：用函数来计算每个字的大小 effect：词云效果，默认为"equal"，可选择"linerMap"，主要表现为词频差异性效果不一样 list：基于原有配置项做了扩展，原有格式为[key,value],新增是否高亮选项，如['foo', 12332, true]，数组第三项则表示默认是否高亮 renderer：新增配置项渲染模式，默认为"canvas"，可选择"div" e.g. renderer: 'canvas' tooltip：新增配置项，格式为object格式，详细配置见下 show：是否显示tooltip，默认为true formatter：自定义tooltip格式，返回html，回调参数为当前所选的词 className： 自定义tooltip的样式名 background：自定义tooltip背景色，默认为'rgba(0,0,0,0.8)' position: 自定义tooltip位置，默认为跟随鼠标，回调函数(item: Array, dimension: Object, event: Object) => Object<{left, top}> color：基于原有的color配置项做了修改，原color配置项支持字符串与函数，此处不变，可兼容原wordcloud2配置，新增特性为支持数组，当color为数组时，将按数组顺序取色，其中数组分以下两种情况 当数组元素为颜色字符串时，直接使用渲染 当数组元素为数组时，将使用数组元素渲染渐变色，v1.0.7版本更新，支持横向渐变或纵向渐变 e.g: color: [['blue', 'white', 0]]，如例子所示，将渲染从上到下由蓝到白的纵向渐变色 e.g: color: [['blue', 'white', 1]]，如例子所示，将渲染从左到右由蓝到白的横向渐变色 color格式为：[[color1, color2, color3, ...colorN, type]]，type为0或1，默认为0 shadowOffsetX：新增配置项，文字阴影X轴偏移量 shadowOffsetY：新增配置项，文字阴影Y轴偏移量 shadowBlur：新增配置项，文字阴影模糊量 shadowColor：新增配置项，文字阴影颜色 maskImage： 新增配置项，白底黑形状图片，上传后词云可渲染图片形状 autoFontSize：新增配置项，类型为Boolean，默认关闭，当开启时，maxFontSize 和 minFontSize配置项将失效，自动计算单词字体大小，突出高频，且保证词频一定渲染成功，配和maskImage同时使用时，效果最佳 maxFontSize：新增配置项，最大字号 minFontSize：新增配置项，最小字号 cursorWhenHover：新增配置项，鼠标经过时样式 'default' | 'pointer' methods dispatchAction

发送事件，目前支持highlight和downplay

e.g:

var wordCloud = new B2wordCloud(element, options) wordcloud.dispatchAction({ type: 'highlight', // highlight或downplay dataIndex: 0, // 高亮数据索引 keepAlive: true, // 高亮词是否唯一，false即同时只能高亮一个词 }) 重要版本更新 v2.0.4

基于wordcloud2的词云，在对任意图形的支持方式很简单，根据图片形状做一个类似遮罩，算法不会在超出边界的地方渲染单词，这样会造成一个问题，当高频词词频近似，而我们又需要设置较大的maxFontSize，以此来达到突出高频词的目的达到更好的视觉效果时，有很大概率会漏掉某些权重大的单词，这不符合数据可视化的常用场景，我们正好有这个场景，既需要突出高频词，又需要确保单词必须保证渲染，因此这次版本升级简单解决一下这个问题。

美化词云，更换单词大小计算算法 新增 autoFontSize 配置项 ，详细解析见文档 废弃 resize 内置方法，如需重新渲染适配，请自行实现 v2.0.0 字符大小逻辑重构 图片形状逻辑重构 支持词高亮 新增方法 dispatchAction方法，详细用法见文档 v1.0.14 新增 cursorWhenHover 配置项 v1.0.11 图片形状API实现错误，正确为 maskImage（遵循文档） v1.0.8 修复了tooltip移位问题 v1.0.7 renderer: 'div' 模式下，阴影改用filter: drop-shadow，阴影效果更佳 renderer: 'canvas' 模式下优化渐变色计算逻辑，效果更佳 支持横向渐变与纵向渐变两种选项，详情见color配置项