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