数据可视化展示—用户词云

词云

用户词云是用来来展示大量文本数据，由词汇组成类似云的彩色图形，铜虫用于展示数据中的标签等，它可以根据标签的权重来控制展示文字的大小，它有以下的优点：

快速感知最突出的文字
快速定位按字母顺序排列的文字中相对突出的部分

本质上，词云是特殊的点图，就是在画布上绘制点，每一个点代表一个词，点的大小是权重，根据颜色区分类别，最后将点替换为文字，配置上旋转和图形即可。

这里我们使用的是蚂蚁金服AntV的G2图，首先看一下官网给的样例需要引入的模块：

<script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.1.0/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.7/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>

g2.min.js是antV的G2库；data-set.min.js是antV处理展示数据使用的dataset，里面集成了许多处理数据的方法，将数据处理成dataview类型用于绘图；jquery这里就不赘述了，lodash.min.js是用于降低array、number、string、object使用难度的一个库，封装了许多方法，对数据处理非常方便。

配置词云：

function getTextAttrs(cfg) {
  return _.assign({}, {
    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'
  }, cfg.style);
}

// 给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
      })
    });
  }
});

上面是官网样例给出的配置方式，将点状图的一些配置更改为词云的配置即可。_.assign方法用于对象的合并。

然后是输入数据：

 let da = [{
            text: '111',
            value: Math.random(),
            category: 'a'
        },
        {
            text: '333',
            value: Math.random(),
            category: 'b'
        }]

数据有三个字段，text用于展示词，value是权重，category表示分类（用于区分颜色）。

然后创建data view来进行数据处理：

let dv = new DataSet.View().source(da)
    var range = dv.range('value');
    var min = range[0];
    var max = range[1];
    dv.transform({
        type: 'tag-cloud',
        fields: ['text', 'value'], // 参与标签云layout的字段集
        font: 'Verdana', // 标签字体
        size: [400, 300], // 画布size，[ width, height ]
        padding: 0,
        spiral: 'rectangular', // 标签螺旋排布规律函数 'archimedean' || 'rectangular' || {function}
        fontSize(d) {
            if (d.value) {
                return (d.value - min) / (max - min) * (80 - 24) + 24;
            }
            return 0;
        }, // 计算标签字体大小的回调函数，d为一行数据
        text(d) {
            return d.text
        }, // 生成标签文本的回调函数，d为一行数据
        timeInterval: Infinity, // 最大迭代时间
        //  imageMask: {
        //      Image
        //  }, // Image的实例，必须是loaded状态
    })

最后就是绘制图形，同时规定显示的提示文章tooltip

const chart = new G2.Chart({
        id: 'word',
        // width: 500,
        forceFit: true,
        height: 300,
        padding: 0
    });
    chart.legend(false);
    chart.axis(false);
    chart.tooltip({
        showTitle: false
    });
    chart.source(dv);
    chart.coord().reflect();
    chart.point().position('x*y').color('category').shape('cloud').tooltip('text*category').active({
        // 设置是否允许选中以及选中样式
        mode: 'single', // 多选还是单选
        style: {
            fontWeight: 'bolder' // 选中的样式
        },
    });
    chart.render();

** 最后的.active是用于注明鼠标悬浮之后的显示样式

这样，词云就配置完成了

数据可视化展示—用户词云

词云

猜你喜欢