什么是G2？
G2是一个简介的渐进式语法，主要用于制作网页的可视化。它提供了一套函数风格式、声明形式的API和组件化的编程范式，希望帮助用户快速完成报表搭建、数据探索、可视化等多样的需求
G2的核心概念：
标记（Mark）：绘制数据驱动的图形
转换（Transform）：派生数据
比例尺（Scale）：将抽象的数据映射为视图数据
坐标系（Coordinate）：对空间通道应用点变换
视图复合（Composition）：管理和增强视图
动画（Animation）：数据驱动的动画和连续的形变动画
交互（Iteraction）：操作视图并且展示详细信息
为什么选G2？和echart对比
设计理念：
G2：基于图形语法，注重数据对图形的微观控制和自由映射，设计出发点是图形
Echart：基于图标类型，提供图表中数据相关的图形映射配置，设计出发点是图表
使用场景：
G2： 更适合需要高度定制和灵活控制图形展示的场景，可以创建非常用的图表类型。
Echart：更适合快速展示常规图标信息，封装好难点，配置数据即可使用
Mark 绘制数据驱动的图形
- interval - 通常用来绘制柱、条形图，饼图等相关图表。
- point - 主要用于绘制散点图，利用点的粒度来分析数据的分布情况。
- line - 根据一系列的点，绘制折线，通常用来绘制折线图。
- area - 通常用来绘制我们常见的面积图，通过填充，可以更好突出趋势堆积信息。
- cell - 根据 x, y 将空间划分成一个子空间，然后进行可视化绘制，常见于一些方块图，如日历图、聚合热力图等。
- rect - 使用两组 x，两组 y 来定位一个矩形区域，常用于直方图、矩阵树图等。
- link - 标记使用两个用 (x, y) 定位的点，绘制一条带方向的直线。通过指定
x，y通道为长度为 2 的字段数组即可。 - vector - 用
start，end两个点来表示一个向量，通常用于绘制具备向量含义的数据，比如风向量场等。 - box - 用来绘制箱线图，通常用来展示一组数据分布情况的统计图。
- boxplot - 用来绘制箱线图，并且内置数据的聚合操作。
- text - 通过指定文本的样式通道，可以在画布上绘制和数据绑定的文本字符。
- image - 利用
src通道在画布上绘制图片。 - shape - 使用自定义函数灵活绘制自定义图形。
- lineX - 指定
x通道来绘制垂直于 x 轴的辅助线，常用于绘制平均值或其他聚合数据辅助线。 - lineY - 指定
y通道来绘制垂直于 y 轴的辅助线，常用于绘制平均值或其他聚合数据辅助线。 - range - 使用一组
x(x1, x2) 和一组y(y1, y2) 来定位一个矩形区域，常用于绘制高亮指定区域的辅助区域。 - rangeX - 使用一组
x(x1, x2) 来定位一个垂直于 x 轴的矩形区域，常用于绘制高亮指定区域的辅助区域。 - rangeY - 使用一组
y(y1, y2) 来定位一个垂直于 y 轴的矩形区域，常用于绘制高亮指定区域的辅助区域。 - polygon - 利用多组 (x, y) 数据点，在画布中绘制闭合的多边形，通常结合一些社区布局算法使用。
- wordCloud - 绘制词云图。
- density - 渲染核密度数据，多用于小提琴图。
- heatmap - 接受热力数据，多用于绘制热力图。
创建可视
new Chart 创建Chart实例 antV G2中的autoFit属性是指图表是否自适应容器宽高。
chart.interval 添加interval图形
interval
通常用来绘制柱状图、条形图、饼图等，通过坐标系、坐标尺、数据Transform等的变化，可以产生多种多样的可视化表现样式，是图形语法中，常见的Mark
import { Chart } from '@antv/g2';
const data = [
{ letter: 'A', frequency: 0.08167 },
{ letter: 'B', frequency: 0.01492 },
];
const chart = new Chart({
container: 'container',
autoFit: true,
});
chart.interval().data(data)
.encode('x', 'letter')
.encode('y', 'frequency')
.encode('color', 'red')
.style('fillOpacity', 0.6);
chart.render();
View Code
.style('maxWidth', 600); 属性修改.style({ 'minWidth': 50, 'fillOpacity': 1 })
.encode('shape', 'hollow') 即可实现空心矩形
.encode('color', 'country') //设置颜色
Coordinate -坐标系
chart
.interval()
.coordinate({ transform: [{ type: 'transpose' }] }) //设置类型
.data(data)
.encode('x', 'year')
.encode('y', 'sales');
View Code
chart..coordinate({ transform: [{ type: 'transpose' }] })type有多种类型
type: 'fisheye' //鱼眼坐标系变换对输入的维度应用笛卡尔鱼眼效果。 type: 'parallel' //Parallel 是平行坐标系变换，将笛卡尔直角坐标系坐标变换为平行坐标系下的坐标。 type: 'polar' //Polar 是极坐标系变换，将笛卡尔直角坐标系坐标变换为极坐标系下的坐标，常用于玫瑰图和柱状图之间的转换。 type: 'transpose' Transpose 是坐标系的转置变换，将 (x, y) 变换成 (y, x)，常用于条形图和柱状图之间的转换。 （常用） 等等 Scale -比例尺 将抽象的数据映射为视觉数据。
- band - 特殊的 ordinal 比例尺，它的值域范围是一个连续的范围。
- linear - 针对连续数据，对数据进行连续映射的比例尺。
- sqrt - 指数固定为
0.5的pow比例尺。 - pow - 类似于
linear比例尺，但是映射函数为指数函数（exponential）。 - log - 类似于
linear比例尺，但是映射函数为对数函数（logarithmic）。 - ordinal - 将离散的数据映射到另外一个离散数据中。
- point - 特殊 band 比例尺，固定配置
bandWith = 0。 - quantize - 类似于
threshold，但是计算切片的方式是基于元素的数据值。 - quantile - 类似于
threshold， 但是计算切片的方式是基于元素在数据中的索引。 - threshold - 将连续的值域范围划分为多个切片，并将这些切片映射到一个离散的数据中。
- time - 特殊的 linear 比例尺，它的值域是一组有时间顺序的数据
Transform - 变换
- bin - 对连续的 x 和 连续的 y 通道进行分箱，并且对通道根据指定的 reducer 进行聚合。
- binX - 对 x 通道进行分箱，如果希望对 y 通道进行分箱，使用 binX + transpose 坐标系。
- diffY - 对 y 和 y1 通道求差集。
- dodgeX - 生成 series 通道值为 color 通道的值，根据 series 通道实现分组效果。
- flexX - 根据指定通道设置 x 比例尺的 flex 属性，实现不等宽矩形的效果。
- group - 对离散的 x 和 连续的 y 通道进行分组，并且对通道根据指定的 Reducer 进行聚合。
- groupColor - 对离散的 color 通道进行分组，并且对通道根据指定的 Reducer 进行聚合。
- groupX - 对离散的 x 通道进行分组，并且对通道根据指定的 Reducer 进行聚合。
- groupY - 对离散的 y 通道进行分组，并且对通道根据指定的 Reducer 进行聚合。
- jitter - 根据离散的 x 和 离散的 y 比例尺，生成 dy 和 dx 通道，实现在某个区域散开的效果。
- jitterX - 根据离散的 x 比例尺，生成 dx 通道，实现在某个区域的 x 方向散开的效果。
- jitterY - 根据离散的 y 比例尺，生成 dy 通道，实现在某个区域的 y 方向散开的效果。
- normalizeY - 对 y 和 y1 通道根据指定的 basis 进行归一化处理。
- select - 按照指定通道进行分组，根据指定通道和 selector 从每组选择出数据。
- selectX - 按照指定通道进行分组，根据 x 通道和 selector 从每组选择出数据。
- selectY - 按照指定的通道进行分组，根据 y 通道和 selector 从每组选择出数据。
- pack - 生成 transform 和 scale 属性，从而让图形在空间中紧凑排列。
- sample - 当数据量远大于屏幕像素的时候，开启一些内置的采样策略，提升图表绘制性能。
- sortColor - 对离散的 color 比例尺的定义域根据指定通道排序。
- sortX - 对离散的 x 比例尺的定义域根据指定通道排序。
- sortY - 对离散的 y 比例尺的定义域根据指定通道排序。
- stackEnter - 对 enterDuration 和 enterDelay 通道进行堆叠，实现分组动画的效果。
- stackY - 按照指定通道分组，对每组的 y 和 y1 通道进行堆叠，实现堆叠效果。
- symmetryY - 按照指定通道分组，给每组的 y 和 y1 通道添加偏移，实现对称效果。
Interaction - 交互 操作视图并且展现详细信息。
- brushFilter - 框选筛选。
- brushXFilter - x 方向框选筛选。
- brushYFilter - y 方向框选筛选。
- brushHighlight - 框选高亮。
- brushXHighlight - x 方向框选高亮。
- brushYHighlight - y 方向框选高亮。
- brushAxisHighlight - 坐标轴框选高亮。
- legendHighlight - 图例高亮。
- legendFilter - 图例筛选。
- tooltip - 展现提示信息。
- elementHighlight - 高亮元素。
- elementHighlightByX - 高亮具有相同 x 通道值的元素。
- elementHighlightByColor - 高亮具有相同 color 通道的元素。
- elementSelect - 选择元素。
- elementSelectByX - 选择拥有相同 x 通道值的元素。
- elementSelectByColor - 选择拥有相同 color 通道值的元素。
- fisheye - 鱼眼交互。
- charIndex - 索引图表。
- poptip - 展现提示文本。
- sliderFilter - 拖动条筛选。
修改提示名称
Component - 组件 绘制辅助视觉元素。
axis: {
y: {
// Title
title: 'Frequency',
titleSpacing: 30,
titleFill: 'steelblue',
// Line
line: true,
arrow: true,
lineArrowOffset: 10,
lineArrowSize: 30,
lineLineWidth: 10,
// Tick
tickLength: 20,
tickFilter: (_, i) => i % 3 !== 0,
// Label
labelFormatter: '.0%',
// Grid
gridLineDash: null,
gridStroke: 'red',
gridStrokeWidth: 5,
gridAreaFill: '#eee',
},
x: {
title: 'Letter',
labelFormatter: (d) => d.repeat(3),
labelFontSize: 30,
labelSpacing: 30,
},
},
View Code
chart.axis('y', { labelFormatter: '.0%' }) 把y轴0.06 换成6%chart.axis('x', { labelSpacing: 4, labelTransform: 'rotate(90)', }) //将x轴名称旋转90度
chart.title('This is the title of chart.');
// 开启 X 轴方向上的滚动条 .scrollbar('x', {}); // 开启 Y 方向缩略轴 .slider('y', {});
chart.state('selected', { fill: '#1783FF', stroke: 'black', strokeWidth: 1 }) chart.state('unselected', { fill: '#ccc' }) .interaction('elementSelect'); // 设置高亮交互; 这3配合使用
设置选中和不选中
Label 绘制数据标签和标签属性的变换
- contrastReverse - 标签颜色在图形背景上对比度低的情况下，从指定色板选择一个对比度最优的颜色。
- overflowHide - 对于标签在图形上放置不下的时候，隐藏标签。
- overlapDodgeY - 对位置碰撞的标签在 y 方向上进行调整，防止标签重叠。
- overlapHide - 对位置碰撞的标签进行隐藏，默认保留前一个，隐藏后一个。
area
目前 area 有以下几个内置 shape 图形，默认为 area。
| 图形 | 描述 | 示例 |
|---|---|---|
| area | 绘制直线连接的面积图 | |
| smooth | 绘制平滑曲线的面积图 | |
| vh | 绘制阶梯面积图，先竖线后横线连接 | |
| hv | 绘制阶梯面积图，先横线后竖线连接 | |
| hvh | 绘制阶梯面积图，竖横竖，中点连接 |
chart.area()
Animation -动画 数据驱动的动画和连续的形变动画。
提供了三种动画场景类型
enter- 元素第一次出现的出场动画；update- 数据更新的时候，元素更新的动画；exit- 数据更新的时候，元素被销毁退出画布的动画；
- fadeIn - 渐现动画。
- fadeOut - 渐隐动画。
- growInX - 容器沿着 x 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
- growInY - 容器沿着 y 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
- morphing - 图形之间的形变动画。
- pathIn - Path 路径入场动画。
- scaleInX - 单个图形沿着 x 方向的生长动画。
- scaleInY - 单个图形沿着 y 方向的生长动画。
- scaleOutX - 单个图形沿着 x 方向的消退动画。
- scaleOutY - 单个图形沿着 y 方向的消退动画。
- waveIn - 划入入场动画效果，不同坐标系下效果不同。
- zoomIn - 沿着图形中心点的放大动画。
- zoomOut - 沿着图形中心点的缩小动画。
关键帧动画
上面的动画都是过渡动画，不涉及到数据的更新，G2 也提供了制作关键帧动画的能力。使用 chart.timingKeyframe 创建一个时间容器，用于放置一系列视图，它会对这些视图中有关系的图形元素应用平滑的过渡效果。而对应关系通过 key 和 groupKey 两个通道指定。
标签：动画,G2,数据,Antv,chart,图形,绘制,通道 From： https://www.cnblogs.com/zhihou/p/18515227