antv图例出现分页_Day5 AntV/G2图表的组成

简介

为了更好的使用G2进行数据可视化，我们需要先了解G2图表的组成及其相关概念。

完整的G2图表组成如下图所示：可以看出图表主要由axes(坐标轴axis的复数),tooltip(提示信息),guide(辅助元素),legend(图例),geom(几何标记 即用何种图形来展示数据，此处为点图)组成的，理解了基本组成，接下来看一下代码的编写。

const chart = new G2.Chart({

width: 1000,

height: 500,

data: data,

padding: [ 20, 80, 60, 80 ]

options: {

// 在这里声明所有的配置属性

}

});

// 以上为配置图表所有信息

chart.render();//配置完成后的渲染命令

以上代码是G2绘制图表的基本代码框架，axes,tooltip,guide,legend,geom这五块的配置信息既可以在options中设置，也可以通过chart方法设置，具体每一种属性的设置会在之后章节进行解析。

1.图例 LEGEND

图例作为图表的辅助元素，用于标定不同的数据类型以及数据的范围，用于辅助阅读图表，帮助用户在图表中进行数据的筛选过滤。

legend配置方式：直接在实例化chart时的options中定义legends属性(注意这里是复数,其他几个组成部分也是这个情况)

调用chart.legend()方法定义

options:{

legends:false

}

//chart.legend(false);

以上两种配置方式对tooltip的设置效果是一样的,都会让图例不显示，若同时设置，则只会chart.legend方法设置生效。

注意：legend图例功能仅在chart上支持配置，在view(关于view后续会提到，现在可以把当成chart的一个子图)上不支持。

2.坐标轴AXES

坐标轴分为两种：直角坐标系：直角坐标系中分为X轴和Y轴

极坐标系：极坐标系由极轴和极径组成。

每个坐标轴又由坐标轴线(line)、刻度线(tickLine)、刻度文本(label)、标题(title)以及网格线(grid)组成。

axes配置方式：同legend

3.集合标记 GEOM

几何标记(Geometry)，即我们所说的点、线、面这些几何图形，在 G2 中几何标记的类型决定了生成图表的类型。也就是数据被可视化后的实际表现，不同的几何标记都包含对应的图形属性。

geoms配置方式：同legend

4.提示信息 TOOLTIP

当鼠标悬停在某个点上时，会以提示框的形式显示当前点对应的数据的信息，比如该点的值，数据单位等。数据提示框内提示的信息还可以通过格式化函数动态指定。

tooltip配置方式：同legend

注意：tooltip图例功能仅在chart上支持配置，在view(关于view后续会提到，现在可以把当成chart的一个子图)上不支持。

5.辅助标记 GUIDE

当需要在图表上绘制一些辅助线、辅助框或者图片时，比如增加平均值线、最高值线或者标示明显的范围区域时，可以使用辅助标记 guide。

tooltip配置方式：同legend

6.总结

图标组成五大块：axes(坐标轴)

tooltip(提示信息)

guide(辅助元素)

legend(图例)

geom(几何标记)

其中每一块都有两种配置方式：options属性配置

chart方法配置

两者效果一样，若同时设置，则只会chart方法设置生效。

注意点：Tooltip(提示信息)和 Legend(图例)仅在 Chart 上支持设置，在view上不支持，view相关知识会在之后的章节进行讲解。