使用G2做出丰富多彩的词云

最新推荐文章于 2024-08-20 09:06:34 发布

programmeryu

最新推荐文章于 2024-08-20 09:06:34 发布

阅读量7.3k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/programmeryu/article/details/72844203

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.网上的词云demo大多千篇一律，图形没办法自定义，所以并不能满足客户的要求

2.经过一番百度谷歌终于找到G2,

参照官网的例子

https://antv.alipay.com/g2/doc/tutorial/advance/draw-word-cloud.html

3.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://a.alipayobjects.com/g/datavis/g2/2.3.2/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>
<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;
        }
    });
    //json数据的地址：https://antv.alipay.com/static/data/g2pv.json
    $.getJSON('./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 imageCloud = 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;
            }
        });

//图片地址
        imageCloud.image("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1185508753,3294372198&fm=23&gp=0.jpg",function(Cloud){
            Cloud.exec(function(texts){
                var chart = new G2.Chart({
                    id : 'c1',
                    // canvas的宽高需要和布局宽高一致
                    width: 850,
                    height: 600,
                    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>

g2pv.json格式：

[{"site":"125.88.160.114","pv":1,"type":0},{"site":"140.205.137.163","pv":1,"type":0},{"site":"192.168.31.247","pv":1,"type":0},{"site":"localhost","pv":2750,"type":0}]

4.词云效果：