antv-g2学习手册-上

本文深入探讨G2图表引擎的核心概念,包括数据、图形属性、几何标记、度量、坐标系、可视化组件、分面和视图。详细解析度量配置、坐标系配置、坐标轴配置、Tooltip配置和图例配置,帮助读者掌握G2的高级应用。

G2所构建出的图表是由一系列独立的图形元素组合而成的:

  1. 数据Data:可视化最基础的部分
  2. 图形属性Attribute:负责将数据中的变量映射到图形空间
  3. 几何标记Geometry:即在图表中实际看到的图形元素,如点,线,多边形等,每个几何标记对象含有多个图形属性,G2的核心就是建立数据中的一系列变量到图形属性的映射
  4. 度量Scale:数据空间到图形属性空间的转换桥梁,每一个图形属性都对应着一个或者多个度量
  5. 坐标系Coordinate:描述了数据是如何映射到图形所在的平面的,同一个几何标记在不同坐标系下会有不同的表现。
  6. 可视化组件Component:图标辅助元素,用于增强图标的可读性和可理解性
  7. 分面Facet:描述如何将数据分解为各个子集,以及如何对这些子集作图并联合进行展示,主要用于多维数据分析

View视图

View是拥有独立数据源,并且能够绘制多个图形的容器,里面会包含Geometry,组件,交互,事件等,而Chart是继承于View。

数据

G2支持的数据格式如下:

[
	{key:value},
	{key:value},
]

数据重载
当chart实例创建完毕之后,通过chart.data(data)装载数据

数据更新
G2更新数据的方式有两种

  1. 图表数据更新(前后数据结构不发生变化),更新后马上刷新图表
	chart.changeData(data)
  1. 仅需要更新数据,但不需要马上更新图表
	chart.data(newData);//更新
	chart.render();//更新图表

注:更新数据时还可以清除图表上的所有元素,重新定义图形语法,改变图表类型和各种配置

	chart().line().position(x*y);
	chart.render();
	chart.clear();//清理所有图形
	chart.data(newData);//加载新数据
	chart.interval().position(x*y).color("z");//重新定义图形语法
	chart.render();

图表组成

在这里插入图片描述

度量配置

度量(Scale)用于定义数据的类型和展示方式,主要用于:

  • 生成坐标轴刻度值
  • 显示图例项
  • 格式化数据展示文本
度量的定义
### 安装步骤 为了在基于 Vite 的 Vue 项目中集成 AntV G2 图表库,需先通过 npm 或 yarn 安装必要的依赖包。执行如下命令来安装 `@antv/g2` 和其对应的 Vue 组件包裹器 `@antv/g2plot`: ```bash npm install @antv/g2 @antv/g2plot ``` 或者如果偏好使用 yarn,则运行: ```bash yarn add @antv/g2 @antv/g2plot ``` ### 配置方法 完成上述安装之后,在项目的入口文件(通常是 main.js 或者 main.ts 文件),注册全局组件以便于在整个应用范围内使用这些图表组件。 ```javascript import { createApp } from 'vue'; import App from './App.vue'; // 导入并注册G2Plot插件 import G2Plot from '@antv/g2plot'; app.use(G2Plot); const app = createApp(App); app.mount('#app'); ``` 对于某些特定场景下的配置需求,比如样式调整或是国际化支持等,可以根据官方文档进一步定制化设置[^1]。 ### 基本用法示例 下面给出一段简单的代码片段展示如何在一个 Vue 单文件组件内创建柱状图实例: ```html <template> <div id="container"></div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue'; import { Column } from '@antv/g2plot'; let chart; onMounted(() => { const data = [ { type: '分类一', sales: 38 }, { type: '分类二', sales: 52 }, { type: '分类三', sales: 61 }, { type: '分类四', sales: 145 }, { type: '分类五', sales: 48 }, { type: '分类六', sales: 38 }, { type: '分类七', sales: 38 }, { type: '分类八', sales: 77 } ]; chart = new Column('container', { title: { visible: true, text: 'The Sales of Each Category', }, forceFit: true, padding: 'auto', data, xField: 'type', yField: 'sales' }); chart.render(); }); </script> <style scoped> #container { width: 600px; height: 400px; } </style> ``` 此段代码展示了如何利用 AntV/G2 库中的 `Column` 类型快速构建一个基础的条形统计图,并将其渲染到指定 DOM 节点上。值得注意的是,这里采用了 Composition API 形式的编写方式,这使得逻辑更加清晰易懂[^2]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值