AntV G2理念：的空间通道与非空间通道、编码映射与图例配置
Author：zhoulujun Date：
我为什么从echarts叛变到antV G2，是因为我被其洗脑：
有被称为可视化圣经的《The Grammar of Graphics》作理论支撑，将可视化理论与web技术做了非常好的结合。
可用“可视化语法”绘制想要的图表，非常灵活。 例如堆积柱形图的坐标系由笛卡尔坐标系改为极坐标系，堆积柱形图就变为了圆环图；
可视化编码的“标准模型”
在可视化领域（Cleveland、Bertin、Munzner 等人的体系）：
G2 对这套理论的工程化实现
Mark（图形标记）
“画的是什么几何形状”
| Mark | 含义 |
|---|---|
| point | 点 |
| line | 线 |
| area | 面 |
| interval | 柱 |
| polygon | 多边形 |
| text | 文本 |
G2 中的 Mark = geometry / mark
例如：
{
mark: 'interval',
}Channel（视觉通道）
“用什么视觉属性表达数据”
| 通道 | 人类感知类型 |
|---|---|
| x / y | 空间位置 |
| color | 色相 / 明度 |
| size | 面积 / 长度 |
| shape | 形状差异 |
| opacity | 透明度 |
| angle | 角度 |
| length | 长度 |
G2 中的 Channel = encoding
{
x: 'date',
y: 'value',
color: 'type',
size: 'count',
}我在看AntV G2 的图例配置：https://g2.antv.antgroup.com/manual/component/legend
编码映射：https://g2.antv.antgroup.com/manual/core/encode
对于 color，opacity，size，shape 这四个非空间通道，会自动生成不同的图例
color / size / shape / opacity如果你传的是「字段名」，G2 会认为这是一个“视觉编码映射”
→ 自动推断这是一个维度或度量
→ 自动生成对应类型的图例
这个我感到非常迷茫
啥是非空间通道？
在 G2 里可以粗分为两类通道
空间通道（Spatial）
| 通道 | 含义 |
|---|---|
| x | x 轴 |
| y | y 轴 |
| theta | 极坐标角度 |
| radius | 极坐标半径 |
决定 “点画在哪”
非空间通道（你问的这四个）
| 通道 | 含义 | 场景/语义 |
|---|---|---|
| color | 颜色 | 分类 |
| size | 大小 | 数值强弱 |
| shape | 形状 | 层次分级 |
| opacity | 透明度 | 置信度/权重 |
决定 “长什么样”
G2 会对非空间通道做 scale 推断
只要该通道参与了 scale
就一定会生成 legend
不同通道 + 不同字段类型 = 不同图例类型
转载本站文章《AntV G2理念：的空间通道与非空间通道、编码映射与图例配置》,
请注明出处：https://www.zhoulujun.cn/html/webfront/visualization/charts/9725.html