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 : 1000,
    height : 500,
    // 设定文字大小配置函数(默认为12-40px的随机大小)
    size: function(words){
      // 将pv映射到canvas可绘制的size范围14-100(canvas默认最小文字为12px)
      return ((words.pv - min)/(max - min)) * (100 - 14) + 14;
    },
    // 设定文字内容
    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;
    }
  });
  // 执行词云布局函数，并在回调函数中调用G2对结果进行绘制
  layout.exec(function(texts){
    var chart = new G2.Chart({
      id : 'c1',
      // canvas的宽高需要和布局宽高一致
      width : 1000,
      height : 500,
      plotCfg : {
        margin : 0
      }
    });
    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>

词云

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