词云 - AntV

其他

词云

词云，又称文字云，由词汇组成类似云的彩色图形。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>词云</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/lodash-4.17.4.min.js"></script>
<script>
  function getTextAttrs(cfg) {
    return _.assign({}, cfg.style, {
      fillOpacity: cfg.opacity,
      fontSize: cfg.origin._origin.size,
      rotate: cfg.origin._origin.rotate,
      text: cfg.origin._origin.text,
      textAlign: 'center',
      fontFamily: cfg.origin._origin.font,
      fill: cfg.color,
      textBaseline: 'Alphabetic'
    });
  }

// 给point注册一个词云的shape
  G2.Shape.registerShape('point', 'cloud', {
    drawShape: function drawShape(cfg, container) {
      var attrs = getTextAttrs(cfg);
      return container.addShape('text', {
        attrs: _.assign(attrs, {
          x: cfg.x,
          y: cfg.y
        })
      });
    }
  });
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/world-population.json', function(data) {
    var dv = new DataSet.View().source(data);
    var range = dv.range('value');
    var min = range[0];
    var max = range[1];
    dv.transform({
      type: 'tag-cloud',
      fields: ['x', 'value'],
      size: [window.innerWidth, window.innerHeight],
      font: 'Verdana',
      padding: 0,
      timeInterval: 5000, // max execute time
      rotate: function rotate() {
        var random = ~~(Math.random() * 4) % 4;
        if (random == 2) {
          random = 0;
        }
        return random * 90; // 0, 90, 270
      },
      fontSize: function fontSize(d) {
        if (d.value) {
          return (d.value - min) / (max - min) * (80 - 24) + 24;
        }
        return 0;
      }
    });
    var chart = new G2.Chart({
      container: 'mountNode',
      width: window.innerWidth,
      height: window.innerHeight,
      padding: 0
    });
    chart.source(dv, {
      x: {
        nice: false
      },
      y: {
        nice: false
      }
    });
    chart.legend(false);
    chart.axis(false);
    chart.tooltip({
      showTitle: false
    });
    chart.coord().reflect();
    chart.point().position('x*y').color('category').shape('cloud').tooltip('value*category');
    chart.render();
  });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>词云</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body style="background: #1f1f1f;">
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/lodash-4.17.4.min.js"></script>
<script>G2.Global.setTheme('dark');</script>
<script>
  function getTextAttrs(cfg) {
    return _.assign({}, cfg.style, {
      fillOpacity: cfg.opacity,
      fontSize: cfg.origin._origin.size,
      rotate: cfg.origin._origin.rotate,
      text: cfg.origin._origin.text,
      textAlign: 'center',
      fontFamily: cfg.origin._origin.font,
      fill: cfg.color,
      textBaseline: 'Alphabetic'
    });
  }

图表简介

词云，又称文字云，由词汇组成类似云的彩色图形。

了解更多

图表用法

用于展示大量文本数据。

关联图表

点图

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

关联图表

相关链接