antv-g2入门

G2 一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。

# 简介

# 入门

# 安装

npm install @antv/g2 --save

# 基本使用

new Chart() 创建 Chart 图表对象，指定图表所在的容器 id、图表的宽高、边距等信息；
chart.data() 载入图表数据源；
使用图形语法进行图表的绘制；
chart.render() 渲染图表。

const chart = new Chart({
  container: this.$refs.chart1,
  autoFit: true,
  defaultInteractions: ["tooltip", "legend-active"],
});

chart.data([
  { year: "1951 年", sales: 38 },
  { year: "1952 年", sales: 52 },
  { year: "1956 年", sales: 61 },
  { year: "1957 年", sales: 145 },
  { year: "1958 年", sales: 48 },
  { year: "1959 年", sales: 38 },
  { year: "1960 年", sales: 38 },
  { year: "1962 年", sales: 38 },
]);
chart.interval().position("year*sales");
chart.render();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Chart

官方地址 (opens new window)

G2 的 View 是图层容器的概念，每一个 View 拥有自己独立的数据源、坐标系、几何标记、Tooltip 以及图例，可以理解 View 是整个 G2 体系中，用来组装数据，Component，Geometry 的容器。一个 View 可以包含有多个子 View，通过这种嵌套关系，可以将一个画布按照不同的布局划分多个不同区域（分面），也可以将不同数据源的多个 View 叠加到一起，形成一个多数据源，多图层的图表。

Chart 是继承自 View，用于提供创建 canvas、已经自适应图表大小等能力，便于开发者使用的类

# 常用属性

container: 指定 chart 绘制的 DOM，可以传入 DOM id，也可以直接传入 dom 实例。
autoFit: 图表是否自适应容器宽高，默认为 false
width&height: 图标的宽和高
defaultInteractions：设置默认的交互（也可以通过Interaction设置）
theme: 设置主题

# 方法

changeSize: 改变图表大小，同时重新渲染。
changeVisible: 显示或隐藏图表
render: 渲染流程，渲染过程需要处理数据更新的情况
clear: 清空图表上所有的绘制内容，但是不销毁图表
destroy: 销毁图表，同时解绑事件
createView: 创建子 view
removeView: 移除子 view

# Geometry

官方地址 (opens new window)

设置几何图形的属性以及绘制逻辑

chart.interval().position("year*sales");
chart.line().position("year*sales");

1
2

# 属性

interval: 用于绘制柱状图、直方图、南丁格尔玫瑰图、饼图、条形环图（玉缺图）、漏斗图等。
point: 用于绘制点图、折线图中的点等。
line: 用于绘制折线图、曲线图、阶梯线图等。
area: 用于绘制区域图（面积图）、层叠区域图、区间区域图等。
path: 用于绘制路径图，地图上的路径等。
polygon: 用于绘制色块图（像素图）、热力图、地图等。
edge: 用于绘制流程图、树、弧长连接图、和弦图、桑基图等。
heatmap: 用于绘制热力图。
violin: 用于绘制小提琴图
schema: 用于绘制 k 线图，箱型图。

# 方法

position: 配置 position 通道映射规则。

// 数据结构: [{ x: 'A', y: 10, color: 'red' }]
geometry.position("x*y");
geometry.position(["x", "y"]);
geometry.position({
  fields: ["x", "y"],
});

1
2
3
4
5
6

color: 设置颜色
```
geometry.color("#1890ff");
```
1

# Coordinate

官方地址 (opens new window)

配置坐标系的类型，操作和设置

参数名	类型	默认值	描述
type	string	'rect'	坐标系类型
cfg	CoordinateCfg	-	坐标系配置项，目前常用于极坐标
actions	CoordinateActions[]	-	坐标系变换操作

type 类型

cartesian / rect：笛卡尔坐标系，G2 默认的坐标系 chart.coordinate('rect')
polar：极坐标系 chart.coordinate('polar')
helix：螺旋坐标系，基于阿基米德螺旋线 chart.coordinate('helix')
theta：一种特殊的极坐标系，半径长度固定，仅仅将数据映射到角度，常用于饼图的绘制。 chart.coordinate('theta') 或者 chart.coordinate('polar').transpose()

比如饼图

chart.coordinate("theta", {
  radius: 0.75,
});

1
2
3

上次更新: 2024/01/18, 10:44:15

← antv-x6 入门 antv-g2Plot→