简介
版本为 4.x.x
G2 是一套基于图形语法理论的可视化底层引擎，以数据驱动，提供图形语法与交互语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。
安装看官网教程 g2.antv.vision/zh/docs/man…
图表组成
为了更好的对 G2 图表的了解，首先需要了解图表的组成结构。
import { Chart } from '@antv/g2';
const data = [
{ name: 'MODIFY', value: 138, washaway: 0.21014492753623193 },
{ name: 'PRERELEASE', value: 109, washaway: 0.5596330275229358 },
{ name: 'RELEASING', value: 148, washaway: 0 },
];
const colorSet = {
MODIFY: '#4FAAEB',
PRERELEASE: '#9AD681',
RELEASING: '#FED46B',
};
// 创建 Chart 对象， 可以配置图表基础配置
const chart = new Chart({
container: 'container',
autoFit: true,
height: 500,
appendPadding:[30]
});
// 设置数据
chart.data(data);
// 设置 最标轴
chart.axis('name', {
title: {},
});
// 几何标记
chart
.interval()
.position('name*value')
.shape('text-interval')
.color('name', (value) => colorSet[value])
.size(30);
// 图表说明
chart.annotation().text({
content: 'down',
position: ['32%','50%'],
});
chart.annotation().text({
content: 'up',
position: ['66%','50%'],
});
// 滚动条
chart.option('scrollbar', {});
// 缩略轴
chart.option('slider', {});
// 图例
chart.legend(true);
// 信息提示框
chart.tooltip({});
// 渲染图表 可以传入 true 不更新整个图表
chart.render();
以上代码包含了 G2 绘制图表的基本代码，包含了coordinate 坐标系、axis 坐标轴、label 数据标签、geometry 几何标记、annotation 图形标注、tooltip 信息提示框、legend 图例、scrollbar 滚动条、slider 缩略轴 ，每一部分的具体内容看文档 g2.antv.vision/zh/docs/api…。
1、coordinate 坐标系
功能:
- 用于配置不同的坐标系，例如 polar 极坐\helix 螺旋坐标系。
- 旋转，缩放，镜像映射和置换等坐标系变换操作。
使用 chart.coordinate()
2、axis 坐标轴
功能:
- 对坐标轴进行配置，包含了 title 轴标题、line 坐标轴线、tickLine 坐标轴刻度线线、subTickLine 坐标轴子刻度线、label 坐标轴文本标签、grid 坐标轴网格线 的配置。
- 最标轴动画配置 animate、animateOption 。
- position 坐标轴 位置配置。
- 坐标轴label文本 方向 verticalFactor 和 最大长度 verticalLimitLength 配置
使用 chart.axis()
3、label 数据标签
功能:
- 控制数据文本显影、显示内容、文本的样式、旋转角度、偏移位置、连接线。
- 控制数据文本的动画。
- 提供文本标签的布局类型，例如 多个数据文本叠在一起进行部分隐藏。
使用 chart.label()
3、geometry 几何图形
功能:
- 'interval' | 'point' | 'line' | 'area' | 'path' | 'edge' | 'polygon' | 'heatmap' | 'violin' | 'schema' 的分类，进行绘制用于绘制柱状图、直方图、南丁格尔玫瑰图、饼图、条形环图（玉缺图）、漏斗图等图表内部的形状。
- 控制图形动画效果。
- 图形内部添加 label 数据标签。
使用 chart.['interval' | 'point' | 'line' | 'area' | 'path' | 'edge' | 'polygon' | 'heatmap' | 'violin' | 'schema']()
4、annotation 图形标注
功能:
- 用于在图表上标识额外的标记注解, 有 arc、image、line、text、region、regionFulter、dataMarker、dataRegion、shape、html 这些标注形式 。
使用 chart.annotation()
5、tooltip 信息提示框
功能:
- 当鼠标悬停在图表上或者手指点按移动设备的某个数据点时，以交互提示信息的形式展示该点的数据
使用 chart.tooltip()
6、legend 图例
功能:
- 图表的辅助元素，使用颜色、大小、形状区分不同的数据类型，用于图表中数据的筛选。
使用 chart.legend()
7、scrollbar 滚动条
功能:
- 可以让用户在数据量较大的情况下一次只关注局部的数据。
使用 chart.option('scrollbar',{})
8、slider 缩略轴
功能:
- 可以放大微观看数据的片断，同时还可以拖拽观察数据在一定区间内的演变。
使用 chart.option('slider',{})
总结
图表的内容是由各个片段组成，每一块都有自己重要的功能。不过各个片段在图表中的占比是不一样的，比较重要的是 axis、tooltip、legend、geometrya、label、coordinate这些, scrollbar 、slider、annotation 更多的是辅助作用。
