https://antvis.github.io/g2/doc/tutorial/start/scale.html

plot基本概念

image.png

图表布局

image.png
左下角为(实际plot的)坐标系起点，右上角为终点

data数据

Frame对象

度量Scale & 列定义

geom几何标记

g2中几何标记的类型：

geom 类型 描述
point 点，用于绘制各种点图。
path 路径，无序的点连接而成的一条线，常用与路径图的绘制。
line 线，点按照 x 轴连接成一条线，构成线图。
area 填充线图跟坐标系之间构成区域图，也可以指定上下范围。
interval 使用矩形或者弧形，用面积来表示大小关系的图形，一般构成柱状图、饼图等图表。
polygon 多边形，可以用于构建色块图、地图等图表类型。
edge 两个点之间的链接，用于构建树图和关系图中的边、流程图中的连接线。
schema 自定义图形，用于构建箱须图、蜡烛图等图表。
contour 用于等高线的绘制。
heatmap 用于热力图的绘制。

attr图形属性

  • position
  • color
  • size
  • shape
  • opacity

coord 坐标系

G2 包含了 8 种不同的坐标系，目前所有的坐标系均是 2 维的。

coordType 说明
rect 直角坐标系，目前仅支持二维，由x, y两个互相垂直的坐标轴构成。
polar 极坐标系，由角度和半径 2 个维度构成。
theta 一种特殊的极坐标系，半径长度固定，仅仅将数据映射到角度，常用于饼图的绘制。
clock 极坐标的一种，用于绘制时钟的坐标系。
gauge 极坐标的一种，仪表盘坐标系。
map 地理坐标系，支持不同类型的地理投影。
helix 螺旋坐标系，基于阿基米德螺旋线。

axis坐标轴

G2 生成的坐标轴由如下五部分组成：

  1. 标题 title
  2. 坐标轴线 line
  3. 文本 labels
  4. 刻度线 tickLine
  5. 网格 grid

image.png

legend图例

属性名 解释 默认值
position 图例的显示位置，可配置值 ‘top’,’left’,’right’,’bottom’ 。 ‘right’
title 用于图例标题的显示样式配置，如果值为 null 则不展示。 左右两侧图例默认展示标题，上下图例默认不展示标题
back 用于图例背景色的配置 默认没有背景色
dx 整个图例的水平偏移距离 —
dy 整个图例的垂直偏移距离 —
width 图例的整体宽度（用于连续图例） 20
height 图例的整体高度（用于连续图例） 156
itemWrap 图例项过多时是否自动换行（用于分类图例） false
marker 配置图例 marker 的显示样式，支持指定 point 几何标记支持的所有 shape(除去 ‘rect’)：’circle’, ‘square’, ‘bowtie’, ‘diamond’, ‘hexagon’, ‘triangle’, ‘triangle-down’, ‘hollowCircle’, ‘hollowSquare’, ‘hollowBowtie’, ‘hollowDiamond’, ‘hollowHexagon’, ‘hollowTriangle’, ‘hollowTriangle-down’, ‘cross’, ‘tick’, ‘plus’, ‘hyphen’, ‘line’ ‘circle’

参考此链接

tooltips提示信息

image.png

guide辅助线

G2 目前支持 6 种辅助标记类型：

  • 辅助线，例如表示平均值或者预期分布的直线；
  • 辅助图片，在图表上添加辅助图片；
  • 辅助文本，指定位置添加文本说明；
  • 辅助框，框选一段图区，设置背景、边框等；
  • 辅助标签(tag)，包含文本标识和辅助线的辅助标记，会从目标到说明文本之间绘制一条线；
  • 辅助 html，指定位置添加自定义html，显示自定义信息。

stat统计变换

提供以下两种方式对数据信息进行处理：

  1. 对数据信息进行汇总，将多条记录合并成一条，如获取数据集合某一列的最大值、最小值等；
  2. 将一条记录分解为多条记录，如求一个数据点的区域范围

facet分面

分面，将一份数据按照某个维度分隔成若干子集，然后创建一个图表的矩阵，将每一个数据子集绘制到图形矩阵的窗格中，所有子图采用相同的图表类型，并进行了一定的设计，使得它们之间方便进行比较。
总结起来，分面其实提供了两个功能：

  1. 按照指定的维度划分数据集；
  2. 对图表进行排版。