简介

词云，又称文字云，由词汇组成类似云的彩色图形，用于展示大量文本数据。

本文主要介绍如何使用G2现有的功能绘制出词云。通过分析发现，词云的本质是点图，是在相应坐标点绘制具有特定样式的文字的结果，G2已经给出了绘制点图和自定义shape的接口，也就是说我们只缺一个词云布局算法。

使用 G2 绘制词云 - 图1

算法需求

词云布局算法要求只需要输入文字数据集，能够返回文字的坐标和特定样式，输出信息如下：

  • x: x坐标
  • y: y坐标
  • text: 文字内容
  • size: 文字大小
  • rotate: 文字旋转角度
  • font: font样式
  • style: style样式
  • weight: weight样式

G2绘制

有了如上所述的词云布局算法，我们就能使用G2绘制出这样的词云demo链接。

使用 G2 绘制词云 - 图2

具体步骤如下：

  • step0: 给point注册一个词云的shape，这样就能在点图的坐标绘制出特定样式的文字了，这是关键步骤，也是提前准备工作，具体使用方法请参见G2自定义shape教程
  1. var Util = G2.Util;
  2. var Shape = G2.Shape;
  4. // 获取文字样式
  5. function getTextAttrs(cfg) {
  6.   var textAttrs = Util.mix(true, {}, {
  7.     fillOpacity: cfg.opacity,
  8.     fontSize: cfg.size,
  9.     rotate: cfg.origin._origin.rotate,
  10.     text: cfg.origin._origin.text,
  11.     textAlign: 'center',
  12.     fill: cfg.color,
  13.     textBaseline:'Alphabetic'
  14.   }, cfg.style);
  15.   return textAttrs;
  16. }
  18. // 给point注册一个词云的shape
  19. Shape.registShape('point', 'cloud', {
  20.   drawShape: function(cfg, container) {
  21.     cfg.points = this.parsePoints(cfg.points);
  22.     var attrs = getTextAttrs(cfg);
  23.     // 给容器添加text类型的shape
  24.     // 坐标仍然是原来的坐标
  25.     // 文字样式为通过getTextAttrs方法获取的样式
  26.     var shape = container.addShape('text', {
  27.       attrs: Util.mix(attrs, {
  28.         x: cfg.points[0].x,
  29.         y: cfg.points[0].y
  30.       })
  31.     });
  32.     return shape;
  33.   }
  34. });
  • step1: 将chart的宽高设定为与布局宽高一致，并将外边距margin设为0，如果需要外边距，请给chart的宽高增加相应的值
  1. var chart = new G2.Chart({
  2.   id : 'c1',
  3.   // canvas的宽高需要和布局宽高一致
  4.   width : 1000,
  5.   height : 500,
  6.   plotCfg : {
  7.     margin : 0
  8.   }
  9. });
  • step2: 传入数据源
  1. chart.source(texts);
  • step3: 将词云坐标系调整为G2的坐标系
  1. chart.coord().reflect();
  • step4: 绘制点图，在x_y的坐标点绘制自定义的词云shape，颜色根据text字段进行映射，大小根据size字段的真实值进行映射，文字样式配置为词云布局返回的样式，tooltip显示site_pv两个字段的内容
  1. chart.point()
  2.   .position('x*y')
  3.   .color('text')
  4.   .size('size',function(size){
  5.     return size;
  6.   })
  7.   .shape('cloud')
  8.   .style({
  9.     fontStyle: texts[0].style,
  10.     fontFamily: texts[0].font,
  11.     fontWeight: texts[0].weight
  12.   })
  13.   .tooltip('site*pv');
  • step5: 渲染
  1. chart.render();

词云布局算法

js文件下载

如果你不想自己实现词云算法，别害怕，我们已经帮你写好了

  • 使用 CDN
  1. <script src="https://a.alipayobjects.com/g/datavis/g-cloud/1.0.2/index.js"></script>
  • 下载脚本

Cloud 1.0.2

配置项

  • 布局宽高
    • width: 默认500
    • height: 默认500
  • 数据源
    • words: 类型为json数组 {Array}，如果有'text'字段，将被映射为文字内容；如果有'size'字段，将被映射为文字大小；如果有'rotate'字段，将被映射为文字旋转角度
  • 文字样式
    • padding: 内边距，默认2
    • font: 字体，默认'serif'
    • fontStyle: 字体的风格，默认'normal'
    • fontWeight: 字体的粗细，默认'normal'
    • spiral: 词云布局规律，可选项为圆形螺旋'archimedean'和方形螺旋'rectangularSpiral'，默认为圆形螺旋
  • 文字大小随机的上下限
    • min: 默认12,
    • max: 默认38,
  • 根据数据源配置词云的文字内容
    • text: function(word)，默认返回数据源的text字段内容
  • 根据数据源配置词云的文字大小
    • size: function(word)，默认返回数据源的size字段内容，没有size字段会给size生成min与max之间的随机数
  • 根据数据源返回词云的文字旋转角度
    • rotate: function(word)，默认返回数据源rotate字段的内容，没有rotate字段会给rotate生成－90到90度之间隔30度随机取一个值的角度

方法

  • Cloud.exec(callback): 执行词云布局算法

该方法返回Cloud词云对象，回调函数的参数是完成布局后的词云数组，数组元素的属性如词云布局算法需求中描述。

  1. var cloud = new cloud({
  2.       words: words
  3.     });
  4. cloud.exec(function(texts){
  5.   // G2语法
  6.   ......
  7. });
  • Cloud.image(imageURL, callback): 根据上传图片设定蒙板，限定词云绘制区域
    • imageURL: 图片链接
    • callback: 回调函数，参数是Cloud词云对象
  1. var imageCloud = new cloud({
  2.       words: words
  3.     });
  4. imageCloud.image("***.jpg",function(Cloud){
  5.   Cloud.exec(function(texts){
  6.     // G2语法
  7.     ......
  8.   });
  9. });

使用image接口效果如下图：

使用 G2 绘制词云 - 图3

总结

从词云布局的G2实现过程我们可以看出，使用G2，你能实现超多布局算法的可视化。赶紧去试一下吧！