G2 可视化图形语法
G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。
和传统的图表系统（HighCharts, Echarts）不同，传统的图表库更多是基于配置来定义图形，G2是通过语句来绘制图形。
-
简单、易用
-
完备的可视化编码
-
强大的扩展能力
简介
G2的构成
一个可视化框架需要四部分：
- 数据处理模块，对数据进行加工的模块，包括一些数据处理方法。例如：合并、分组、排序、过滤、计算统计信息等
- 图形映射模块，将数据映射到图形视觉通道的过程。例如：将数据映射成颜色、位置、大小等
- 图形展示模块，决定使用何种图形来展示数据，点、线、面等图形标记
- 辅助信息模块，用于说明视觉通道跟数据的映射关系，例如：坐标轴、图例、辅助文本等
const chart = new G2.Chart({
container: 'chart',
height: 300
})
// 准备数据
const data = [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 }
];
// 载入数据
chart.source(data)
// 创建图形语法，position 为 x轴*y轴
chart.interval().position('genre*sold')
// 绘制
chart.render()绘制一个简单的图表
option = {
color: ['#3398DB'],
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '60%',
data:[10, 52, 200, 334, 390, 330, 220]
}
]
};
Echart的配置
渲染结果
列定义
G2提供了两种列定义的操作：
1. chart.source(data, defs)
2. chart.scale('field', defs)
度量的类型
根据数据的类型，G2支持以下几种度量类型：
- identity，常量类型的数值，也就是说数据的某个字段是不变的常量；
- linear，连续的数字 [1,2,3,4,5]；
- cat，分类, ['男','女']；
- time，连续的时间类型；
- timeCat，非连续的时间，比如股票的时间不包括周末或者未开盘的日期；
- log，连续非线性的 Log 数据 将 [1,10,100,1000] 转换成[0,1,2,3]；
- pow，连续非线性的 pow 数据 将 [2,4,8,16,32] 转换成 [1,2,3,4,5]。
定义了正确的类型，G2就可以把原始数据对应的字段正确地归一。
除了定义类型，为了定制化展示数据，使用时更多是定义度量的显示方式，比如通过定义度量的formatter格式化坐标轴，图例和tooltip上的展示。
var data = [{
year: '1993',
value: 4
}]
chart.source(data, {
value: {
formatter(value){
return `${value}k`
}
}
})
其它定义
Geom几何标记
Geom(geometry) 表示各种各样的几何图形，比如点，线，面。G2中没有特定的图表类型的概念，用户可以单独绘制某一种类型的图表，也可以绘制混合图表。
chart.interval().position('genre*sold')几何标记类型
声明几何标记，调用chart实例上对应的方法即可，返回值为 Geom 对象，可继续链试调用其他方法。比如：
Geom对象上还有很多可供使用的方法，用于自定义图形属性（attr），label，tooltip和其他交互。
chart.line().position('time*value')
Attr 图形属性
通过G2提供的Geom几何标记，我们可以画出各种各样的图，但想将这些几何标记正确地画到对应的位置并按照我们预期的样式展示，就需要用到图形属性。position, color, size, shape, opacity这些都是图形属性。
首先需要明确一点：图形属性是属于每一个几何标记 的，所以我们先要声明几何标记，然后再在该几何标记对象上进行图形属性的映射
chart.<geomType>().<attrType>(fields[, callback]);position 位置属性
position 位置属性的映射，用于确定由数据中的哪几个字段来确定数据在平面坐标系的位置。通俗地解释，即确定 x 轴和 y 轴的数据字段。
chart.point().position('x*y');(x1, y1) 这样的数值对，最后就会被转换为画布上对应的坐标点。
图形属性种类
图形属性主要分为三大类：
- 数据映射相关的属性函数: position, color, shape, size, opacity；
- 显示辅助信息的函数: style, label, tooltip；
- 额外的控制函数: adjust, select, active, show, hide。
Coord 坐标系和坐标变换
坐标系是将两种位置标度结合在一起组成的 2 维定位系统，描述了数据是如何映射到图形所在的平面。
G2 包含了两种类型坐标系（polar、theta、helix 均属于极坐标），目前所有的坐标系均是 2 维的。
同时G2也提供了一系列坐标系的变换操作，比如rotate，scale，transpose，reflect等
其他
除了基础API外，G2还有各种各样的API，比如通过Axis，单独对轴信息配置，通过Guide设置辅助元素。除此之外，还提供了Shape方法自定义图形，创建自己的Geom几何标记，让图表中的图形有无限可能。
另外在移动端上，AntV拥有一个专注移动端的图表库F2，核心API与G2类似，更专注于移动端性能。
G2 是面粉，ECharts 是面条，皆微小但美好，因小食材怀大梦想，助力共筹东方巨龙崛起之盛宴，迎四海饕客。
-- Echarts创始人，现AntV掌柜，林峰
Echarts是一个内容丰富的图表库，能支持我们几乎所有的图表需求，需要不同的图，通过修改配置就可以完成。
G2更像是一个功能齐全的工具箱，通过G2去画一个图表时，需要思考的不是通过哪个配置去生成想要的图，而是通过哪种几何图形画出想要的图。
Thanks
G2
By showonne
