G2 - 词云

   <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>词云</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://gw.alipayobjects.com/as/g/datavis/g2/2.3.13/index.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script src="https://a.alipayobjects.com/g/datavis/g-cloud/1.0.2/index.js"></script>
<script>
var Util = G2.Util;
var Shape = G2.Shape;

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: 650,
    height: 450,
    // 设定文字大小配置函数(默认为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)) {
          text = words.site;
        }
      }
      return text;
    }
  });
  // 执行词云布局函数，并在回调函数中调用G2对结果进行绘制
  layout.exec(function(texts){
    var chart = new G2.Chart({
      id : 'c1',
      // canvas的宽高需要和布局宽高一致
      width: 650,
      height: 450,
      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>
          

词云

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

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>词云</title>
        <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
        <script src="https://a.alipayobjects.com/g/datavis/g2/2.3.13/g2.js"></script>
        <script src="https://unpkg.com/g2-react@1.2.0/dist/index.js"></script>
        <script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script type="text/babel">
    const MyComponent = React.createClass({
      componentDidMount: function() {
        const Util = G2.Util;
        const Shape = G2.Shape;

function getTextAttrs(cfg) {
          const 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);
            const attrs = getTextAttrs(cfg);
            // 给容器添加text类型的shape
            // 坐标仍然是原来的坐标
            // 文字样式为通过getTextAttrs方法获取的样式
            const 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;
          });
          // 获取数据的最大值和最小值
          const max = data[0].pv;
          const min = data[data.length-1].pv;
          // 构造一个词云布局对象
          const layout = new Cloud({
            // 传入数据源
            words: data,
            // 设定宽高（默认为500*500）
            width: 650,
            height: 450,
            // 设定文字大小配置函数(默认为12-40px的随机大小)
            size: function(words){
              // 将pv映射到canvas可绘制的size范围14-100(canvas默认最小文字为12px)
              return ((words.pv - min)/(max - min)) * (100 - 14) + 14;
            },
            // 设定文字内容
            text: function(words){
              // 将网址处理成用'.'分隔开的第一个字符串
              let index = words.site.indexOf('.');
              let 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)) {
                  text = words.site;
                }
              }
              return text;
            }
          });
          // 执行词云布局函数，并在回调函数中调用G2对结果进行绘制
          layout.exec(function(texts){
            const chart = new G2.Chart({
              id : 'c1',
              // canvas的宽高需要和布局宽高一致
              width: 650,
              height: 450,
              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();
          });
        });
      },
      render() {
          return (
            <div>
              <div id="chart"></div>
            </div>
          );
      },
    });
    ReactDOM.render(<MyComponent />, document.getElementById('c1'));
</script>

</body>
    </html>