antv-g2学习手册-上

最新推荐文章于 2025-06-18 17:06:31 发布

原创

最新推荐文章于 2025-06-18 17:06:31 发布 · 8.9k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

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

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

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

View视图

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

数据

G2支持的数据格式如下：

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

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

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

图表数据更新（前后数据结构不发生变化），更新后马上刷新图表

	chart.changeData(data)

仅需要更新数据，但不需要马上更新图表

	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();