G2 - The Grammar Of Graphics

其他图表 / 图片词云

选择主题

源码

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>图片词云</title>
      <link rel="stylesheet" href="https://os.alipayobjects.com/s/prod/g2/static/doc-b57e62881a0344ecde9e68c4ce312143.css"/>
      
      <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>

<script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script>
    </head>
    <body>
      <div id="c1"></div>
      
      <script src="https://a.alipayobjects.com/g/datavis/g-cloud/1.0.2/index.js"></script>

function getTextAttrs(cfg) {
  var textAttrs = Util.mix(true, {}, {
    fillOpacity: cfg.opacity,
    fontSize: cfg.size,
    rotate: cfg.origin._origin.rotate,
    text: cfg.origin._origin.text,
    textAlign: 'center',
    fill: cfg.color,
    textBaseline:'Alphabetic'
  }, cfg.style);
  return textAttrs;
}

// 给point注册一个词云的shape
Shape.registShape('point', 'cloud', {
  drawShape: function(cfg, container) {
    cfg.points = this.parsePoints(cfg.points);
    var attrs = getTextAttrs(cfg);
    // 给容器添加text类型的shape
    // 坐标仍然是原来的坐标
    // 文字样式为通过getTextAttrs方法获取的样式
    var shape = container.addShape('text', {
      attrs: Util.mix(attrs, {
        x: cfg.points[0].x,
        y: cfg.points[0].y
      })
    });
    return shape;
  }
});

$.getJSON('../../static/data/g2pv.json', function(data) {
  data.sort(function(a,b){
    return b.pv-a.pv;
  });
  // 获取数据的最大值和最小值
  var max = data[0].pv;
  var min = data[data.length-1].pv;
  // 构造一个词云布局对象
  var layout = new Cloud({
    // 传入数据源
    words: data,
    // 设定宽高（默认为500*500）
    width : 500,
    height : 500,
    // 设定文字大小配置函数(默认为12-40px的随机大小)
    size: function(words){
      // 将pv映射到canvas可绘制的size范围14-100(canvas默认最小文字为12px)
      return ((words.pv - min)/(max - min)) * (60 - 12) + 12;
    },
    // 设定文字内容
    text: function(words){
      // 将网址处理成用'.'分隔开的第一个字符串
      var index = words.site.indexOf('.');
      var text = words.site;
      if(index > 0 && index < words.site.length){
        text = words.site.substr(0,index);
        // 当字符串是'www'时获取下一个
        if(text === 'www'){
          text = words.site.substr(index + 1);
          index = text.indexOf('.');
          text = text.substr(0,index);
        }
        // 当字符串是数字时获取整个网址
        if(/^[0-9]*$/g.test(text)) {
          var text = words.site;
        }
      }
      return text;
    }
  });
  var imageURL = 'https://zos.alipayobjects.com/rmsportal/EEFqYWuloqIHRnh.jpg';
  // 引入图片
  layout.image(imageURL,function(imageCloud){
    // 执行词云布局函数，并在回调函数中调用G2对结果进行绘制
    imageCloud.exec(function(texts){
      var chart = new G2.Chart({
        id : 'c1',
        // 当配置了边距时，canvas的宽高等于布局宽高加上边距
        width : 1000,
        height : 500,
        plotCfg : {
          margin : [0, 250, 0, 250]
        }
      });
      chart.legend(false);
      chart.source(texts);
      chart.axis(false);
      chart.tooltip({
        title:false
      });
      // 将词云坐标系调整为G2的坐标系
      chart.coord().reflect();
      // 绘制点图，在x*y的坐标点绘制自定义的词云shape，颜色根据text字段进行映射，大小根据size字段的真实值进行映射，文字样式配置为词云布局返回的样式，tooltip显示site*pv两个字段的内容
      chart.point().position('x*y').color('text').size('size',function(size){
        return size;
        }).shape('cloud').style({
          fontStyle: texts[0].style,
          fontFamily: texts[0].font,
          fontWeight: texts[0].weight
        }).tooltip('site*pv');
      chart.render();
    });
  });
});

</script>

</body>
  </html>

<script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script>
      <script>
        G2.Global.setTheme('dark');
      </script>
    </head>
    <body>
      <div id="c1"></div>
      <script src="https://a.alipayobjects.com/g/datavis/g-cloud/1.0.2/index.js"></script>

</script>

</body>
  </html>

</script>