AntV G2

一、G2

G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性。使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。
安装
通过 npm 安装
npm install @antv/g2 --save
成功安装完成之后,即可使用 import 或 require 进行引用。
import { Chart } from '@antv/g2';
const chart = new Chart({
container: ‘c1’,
width: 600,
height: 300,
});
浏览器引入
既可以通过将脚本下载到本地也可以直接引入在线资源:

使用 script 标签引入 G2 资源时,挂载在 window 上的变量名为 G2,所以在上述实例中需要加上 G2 的前缀。如下:
const chart = new G2.Chart({
/* your options */
});

二、使用方式

1. 创建 div 图表容器
在绘图前我们需要为 G2 准备一个 DOM 容器:

**2. 编写图表绘制代码** 创建 div 容器后,我们就可以进行简单的图表绘制: 1.new Chart() 创建 Chart 图表对象,指定图表所在的容器 id、图表的宽高、边距等信息; 2.chart.data() 载入图表数据源; 3.使用图形语法进行图表的绘制; 4.chart.render() 渲染图表。 **3. 图表容器被销毁时** 在图表容器被销毁时,总是应调用 `chart.destroy()`以销毁实例释放资源,避免内存泄漏。.

绘制图形最难还是第三步的图形语法进行图标的绘制

图形语法:
数据 Data:可视化最基础的部分。
图形属性 Attribute:负责将数据中的变量映射至图形空间。
几何标记 Geometry:即你在图表中实际看到的图形元素,如点、线、多边形等,每个几何标记对象含有多个图形属性,G2 的核心就是建立数据中的一系列变量到图形属性的映射。
度量 Scale:数据空间到图形属性空间的转换桥梁,每一个图形属性都对应着一个或者多个度量。
坐标系 Coordinate:描述了数据是如何映射到图形所在的平面的,同一个几何标记在不同坐标系下会有不同的表现。G2 提供了多种坐标系的支持:笛卡尔坐标、极坐标以及螺旋坐标等。
可视化组件 Component:也可以成为图表辅助元素,用于增强图表的可读性和可理解性,在 G2 中,提供了丰富的可视化组件,包括坐标轴 Axis,图例 Legend,提示信息 Tooltip,图形标记 Annotation,滑动条 Slider 等。
分面 Facet:描述了如何将数据分解为各个子集,以及如何对这些子集作图并联合进行展示,主要用于多维数据分析。
AntV G2_第1张图片
截图来自官方文档,知道G2提供位置、颜色、大小、形状即可
AntV G2_第2张图片
AntV G2_第3张图片
geom图标类型
AntV G2_第4张图片
View视图
AntV G2_第5张图片
AntV G2_第6张图片
Scale 度量
AntV G2_第7张图片
AntV G2_第8张图片
AntV G2_第9张图片
AntV G2_第10张图片
AntV G2_第11张图片
连续度量
AntV G2_第12张图片
AntV G2_第13张图片
AntV G2_第14张图片
日期
AntV G2_第15张图片
AntV G2_第16张图片

你可能感兴趣的:(笔记,前端,javascript,vue.js)