AntV

AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。
【比较，趋势，组成，占比，分布，排名，关系，空间】

基础知识

图形语法

基于《The Grammar of Graphics》(Leland Wilkinson 著)一书
https://book.douban.com/subject/10123863/
它是一套用来描述所有统计图表深层特性的语法规则，该语法回答了『什么是统计图表』这一问题，以自底向上的方式组织最基本的元素形成更高级的元素。

variables；algebra；scales；statics；geometry；coordinate；aesthetics； 变量;代数;尺度;静力学;几何;协调;美学;

图表是由一系列独立的图形语法元素组合而成的：
数据 Data：可视化最基础的部分。
图形属性 Attribute：负责将数据中的变量映射至图形空间。
几何标记 Geometry：即你在图表中实际看到的图形元素，如点、线、多边形等，每个几何标记对象含有多个图形属性，G2 的核心就是建立数据中的一系列变量到图形属性的映射。
度量 Scale：数据空间到图形属性空间的转换桥梁，每一个图形属性都对应着一个或者多个度量。
坐标系 Coordinate：描述了数据是如何映射到图形所在的平面的，同一个几何标记在不同坐标系下会有不同的表现。G2 提供了多种坐标系的支持：笛卡尔坐标、极坐标以及螺旋坐标等。
可视化组件 Component：也可以成为图表辅助元素，用于增强图表的可读性和可理解性，在 G2 中，提供了丰富的可视化组件，包括坐标轴 Axis，图例 Legend，提示信息 Tooltip，图形标记 Annotation，滑动条 Slider 等。
分面 Facet：描述了如何将数据分解为各个子集，以及如何对这些子集作图并联合进行展示，主要用于多维数据分析。
在 G2 中，我们通常这么描述一张图表：一张图表就是从数据到几何标记对象的图形属性的一个映射，此外图形中还可能包含数据的统计变换，最后绘制在某个特定的坐标系中。

• 图形语法：数据到图形的映射，能够绘制出所有的图表
• 交互语法：可以组合出各种交互，对数据进行探索
• 统计语法：对数据进行聚合、归回、拟合等计算，帮助用户从不同层面认知数据
• 动画语法：让数据栩栩如生、交互顺滑

交互语法

在 G2 中，我们认为一个交互行为是由一系列交互环节组成，而每一个交互环节又由以下两部分组成：

触发，交互环节的触发，包括触发对象和触发事件 反馈，交互环节的结果

interaction=trigger+action
对于交互环节，我们又可以将其分类为：

示能：表示交互可以进行 开始：交互开始 持续：交互持续 结束：交互结束 暂停：交互暂停 回滚：取消交互，恢复到原始状态

图表组成

Axis 坐标轴 Tooltip 提示信息 Geometry 几何标记 Legend 图例 :::: 四个很重要

坐标轴 Axis
每个图表通常包含两个坐标轴，在直角坐标系（笛卡尔坐标系）下，分别为 x 轴和 y 轴，在极坐标轴下，则分别由角度和半径 2 个维度构成。
每个坐标轴由坐标轴线（line）、刻度线（tickLine）、刻度文本（label）、标题（title）以及网格线（grid）组成。

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

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

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

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

度量 Scale

度量 (Scale) 是一个非常重要的概念，用于定义数据的类型和展示方式。作用：

• 生成坐标轴刻度值
• 显示图例项
• 格式化数据展示的文本

按照数值是否连续对数据进行分类：

• 分类（非连续）数据，又分为有序分类和无序分类。
• 连续数据，时间也是一种连续数据类型。
• 常量度量，数据是一种常量，只有单个值。 | 数据类型 | 度量类型 | | —- | —- | | 连续 | linear、log、pow、time、quantize、quantile
  - linear：线性度量
  - time：连续的时间度量
  - log：log 度量
  - pow：pow 度量
  - quantize：分段度量，用户可以指定不均匀的分段
  - quantile：等分度量，根据数据的分布自动计算分段
  | | 分类（非连续） | cat、timeCat
  - cat：分类度量
  - timeCat：时间分类度量
  | | 常量 | identity
  常量度量 |

坐标系 Coordinate

可以分为笛卡尔坐标系和非笛卡尔坐标系两种，非笛卡尔坐标系即极坐标（helix 螺旋坐标系也是极坐标的一种），由角度和半径这两个维度来确定位置。目前 G2 还不支持三维坐标系。

坐标系变换：
rotate：旋转，默认按照坐标系中心旋转。
scale：缩放，默认按照坐标系中心进行缩放
transpose：x，y 轴置换，例如柱状图转换成水平柱状图（条形图）
reflect：镜像，沿 x 方向镜像或者沿 y 轴方向映射:

坐标轴 Axis

坐标轴的组成部分：
title标题；tickLine刻度线；label标签；grid网格线；line轴线；

提示信息 Tooltip

提示信息 (Tooltip)，是指当鼠标悬停在图形上时，以提示框的形式展示该点的数据，比如该点的值，数据单位等，帮助用户快速获取图形的关键数据。
crosshairs: tooltip 辅助线，用于辅助定位数据在坐标系的位置，不同坐标系下的有不同的展现方式。
marker: 突出当前数据点的位置
tooltip: 展示数据信息的内容框，我们使用 HTML 的方案，包含 title 以及 items 数据项信息

图例 Legend

图例（legend）是图表的辅助元素，使用颜色、大小、形状（shape, color, size）区分不同的数据类型，用于图表中数据的筛选。
图例分为连续图例和分类图例。
连续图例：颜色深浅；
分类图例：title，marker，itemName；

图形标记 Annotation

图形标注Annotation，作为图表的辅助元素，主要用于在图表上标识额外的标记注解。
https://antv-g2.gitee.io/zh/docs/manual/tutorial/annotation
arc：辅助弧线，只在极坐标系下生效。常用于绘制仪表盘。
image：辅助图片，在图表上添加辅助图片。
line：辅助线（可带文本），例如表示平均值或者预期分布的直线。
text：辅助文本，指定位置添加文本说明。
region：辅助框，框选一段图区，设置背景、边框等。
regionFilter：区域着色，将图表中位于矩形选区中的图形元素提取出来，重新着色。
dataMarker：特殊数据点标注，多用于折线图和面积图。
dataRegion：特殊数据区间标注，多用于折线图和面积图。

其他

文本标签 label
文本标签可包括数据点、拉线、文本数值等元素。
文本布局方案

overlap: label 防遮挡，为了防止 label 之间相互覆盖，通过尝试向四周偏移来剔除放不下的 label。比如散点图； fixedOverlap: 不改变 label 位置的情况下对相互重叠的 label 进行调整。比如地图； limitInShape: 剔除 shape 容纳不了的 label。

动画 animate
渐现渐隐，生长（X方向，Y方向），划入，路径，位移，放大缩小；

数据调整 adjust
数据调整的原则

不能改变数据的含义，给用户带来误解。 数据调整的界限要清晰，不能混淆不同类别的数据。 定量（连续）数据只能进行数据的累加和对称，分类数据只能在当前分类的范围内调整数据。

几种数据调整方法

stack(层叠），将同一个分类的数据值累加起来。以层叠的柱状图为例，x 轴方向的同一个分类下面的数据，按照顺序，将 y 轴对应的值累加，最终将数据调整的不再重叠。 jitter(扰动散开），将数据的位置轻微的调整，使得映射后的图形位置不再重叠。 dodge(分组散开），将同一个分类的数据进行分组在一个范围内均匀分布。 symmetric(数据对称），使得生成的图形居中对齐；对数据进行对称处理，使得数据按照最大的数据进行对称。

几何标记 geometry

滑块 slider

ECharts