使用 G2 绘制词云

简介算法需求G2绘制词云布局算法js文件下载配置项方法总结简介词云，又称文字云，由词汇组成类似云的彩色图形，用于展示大量文本数据。 本文主要介绍如何使用G2现有的功能绘制出词云。通过分析发现，词云的本质是点图，是在相应坐标点绘制具有特定样式的文字的结果，G2已经给出了绘制点图和自定义shape的接口，也就是说我们只缺一个词云布局算法。 image 算法需求词云布局算法要求只需要输入文字数据集，能够返回文字的坐标和特定样式，输出信息如下：

x: x坐标y: y坐标text: 文字内容size: 文字大小rotate: 文字旋转角度font: font样式style: style样式weight: weight样式 G2绘制有了如上所述的词云布局算法，我们就能使用G2绘制出这样的词云demo链接。 image 具体步骤如下：

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.  src="https://a.alipayobjects.com/g/datavis/g-cloud/1.0.2/index.js">

下载脚本 Cloud 1.0.2 配置项 布局宽高 width: 默认500height: 默认500 数据源 words: 类型为json数组 {Array}，如果有’text’字段，将被映射为文字内容；如果有’size’字段，将被映射为文字大小；如果有’rotate’字段，将被映射为文字旋转角度 文字样式 padding: 内边距，默认2font: 字体，默认’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接口效果如下图： image 总结从词云布局的G2实现过程我们可以看出，使用G2，你能实现超多布局算法的可视化。赶紧去试一下吧！

  1.                     当前内容版权归 蚂蚁金服 或其关联方所有，如需对内容或内容相关联开源项目进行关注与资助，请访问 蚂蚁金服 .
  4.                         上一篇:
  7.                         下一篇:
  10.             <div class="