Day3 AntV/G2图表的组成

2019-09-16 10:24:51 浏览数 (2)

简介

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

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

代码语言:javascript复制
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中设置,也可以单独设置,具体每一种属性的设置会在之后章节进行解析。

1.图例 LEGEND

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

  legend配置方式:

  • 直接在实例化chart时的options中定义legends属性(注意这里是复数,其他几个组成部分也是这个情况)
  • 调用chart.legend()方法定义
代码语言:javascript复制
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相关知识会在之后的章节进行讲解。

0 人点赞