G2简介

G2可视化引擎提供图表设计功能。该软件可以帮助用户设计新的图表，处理图表数据，设置数据交互模式，编辑数据处理流程，可视化复杂数据。对于需要处理数据和统计数据的朋友来说非常实用。你可以用这个图形语法来设计带有图表功能的程序。提供坐标轴、图例、提示、文本标签配置、图形标注、滑块、移动条、几何图形、图形元素、视图视图、交互语法等多种编辑功能。可以为用户设计各行业的统计图表，结合DataSet工具进行数据管理，通过DataSet将数据导入图表分析！

G2相关介绍

G2一套面向常规统计图表的数据驱动的高交互可视化图形语法，具有高度易用性和可扩展性。用G2可以用Canvas或者SVG搭建各种交互式的统计图表，不用关注图表的各种繁琐的实现细节。

G2软件功能

完美的图形语法:将数据映射到图形，可以绘制所有图表。

全新的交互语法:各种交互行为可以通过触发和反馈机制进行组合，进行数据探索。

强大的View模块:可以支持个性化数据分析图形的开发。

双引擎渲染:Canvas或SVG可以随意切换。

交互和优雅的体验。

全面拥抱TypeScpt:提供完整的类型定义文件。

G2软件特色

多样化，自由组合

任何图表都可以根据图形语法灵活绘制，满足你无限的创造力。

专业完整性

在大量产品实践的基础上，提供绘图引擎、完整的图形语法和专业的设计规范。

生动、互动

强大的交互式语法有助于视觉分析，并使图表栩栩如生。

G2新版功能

1.完全接受TypeScpt。

2.全新视觉组件:面向交互，体验优雅。

3.强大的视图模块:可以单独使用，有完整的可视化组件和事件，支持视图嵌套和自动布局。

4.全新的互动语法。

5.绘图引擎升级到G 0.4版本，支持双引擎切换。

6.引入数据更新机制。

7.转换动画机制，粒度更细，体验更好。

8.模块化管理提供更灵活的扩展机制。

G2教程

通过npm安装

NPM install @ antv/G2 & # 8211；救援

安装成功后，可以使用import或require进行参考。

浏览器介绍

您可以在本地下载脚本或直接导入在线资源:

开始被使用

G2介绍完页面后，我们准备创建第一个图表。

下面是一个基础的直方图，作为开始我们第一个图表创建的例子。

1.创建div图表容器

在绘制之前，我们需要为G2准备一个DOM容器:

2.编写图表绘制代码。

创建div容器后，我们可以绘制简单的图表:

1.new Chart()创建一个Chart对象，并指定图表的容器id、宽度、高度和边距。

2.chart.data()加载图表数据源；

3.用图形语法绘制图表；

4.chart.render()呈现图表。

G2软件优势

G2图表由一系列图形语法元素组成:

数据:可视化最基本的部分。

归于图属性:负责将数据中的变量映射到图空间。

标记几何图形:即你在图表中实际看到的图形元素，如点、线、多边形等。每个几何标记对象包含多个图形属。G2的核心是建立数据中一系列变量到图形属的映射。

尺度:数据空间和图亏格空间之间的桥梁。每个图属对应一个或多个度量。

坐标:描述数据如何映射到图形所在的平面，同一几何标记在不同坐标系下会有不同的表现。G2提供对多种坐标系的支持:笛卡尔坐标、极坐标和螺旋坐标。

可视化组件:也可以作为图表的辅助元素，增强图表的可读性和可理解性。在G2中有丰富的视觉组件，包括轴、图例图例、工具提示、图形注释、滑块等。

Facet:描述如何将数据分解为子集，以及如何绘制和联合显示这些子集，主要用于数据分析。

G2图形组件

常见G2图表包含如下图所示的组件:

几何几何学

几何，即点、线、面等几何图形，在G2中，几何标记的类型决定了生成图形的类型，即可视化后数据的实际表示。不同的几何标记都包含属于属性的相应图形。

轴

每个图表通常包含两个坐标轴，在笛卡尔坐标系中分别是X轴和Y轴，在极坐标系中分别是角度和半径。

每个坐标轴由坐标线、挠痒痒线、标签、标题和网格线(gd)组成。

传奇传奇

图例作为图表的辅助元素，用于校准不同的数据类型和数据范围，辅助阅读图表，帮助用户过滤图表中的数据。

提示工具提示

当鼠标悬停在某一点上时，当前点对应的数据会以提示框的形式显示出来，如该点的数值、数据单位等。数据提示框中提示的内容也可以由格式化功能动态指定。

辅助标记注释

当需要在图表上绘制一些辅助线、辅助框或图片时，如添加平均线、最大线或标记明显的范围区域，可以使用辅助标记标注。

缩略轴滑块

当图表中有大量数据，并且用户希望专注于特定区域时，可以使用缩略图轴组件。缩略轴更适合折线图。

动态Scllbar

当图表中有大量数据时，移动条组件也可用于一次仅浏览部分数据。移动杆组件提供水平移动杆和垂直移动杆。条形图组件更适合柱形图和条形图。

G2坐标轴

坐标轴和坐标作为图形的指导元素，可以帮助你用原值映射图形。在G2中，坐标轴是自动生成的，其内容由尺度度量控制，渲染的细节由主题控制。

坐标轴组成

下图显示了G2轴的组件:

坐标系控制坐标轴和网格线的绘制，坐标轴在不同坐标系中的表现不同。下图显示了两个不同坐标系的坐标轴和网格线:

坐标轴配置

G2提供坐标轴的配置界面，主要用于坐标轴样式的配置:

chart .坐标轴()；

关于这个接口的详细使用，可以阅读相关的API文档。下面主要介绍坐标轴内容的配置方法。

标题配置

如本文开头所述，坐标轴的内容是由比例尺控制的，因此比例尺的名称控制着坐标轴的标题内容。Chart.axis()仅用于控制坐标轴的外观配置。在G2默认主题中，我们关闭了标题的显示。

默认情况下，我们将为每个轴生成一个标题，标题名称默认为轴对应的数据字段的通用名称。当需要为坐标轴设置别名时，需要通过chart.scale()界面，通过为对应的比例尺设置别名来改变坐标轴的标题。

标签配置

轴文本的内容也由刻度测量控制。G2将默认生成所有标签内容。我们可以通过chart.scale()界面改变对应轴标签的显示:

当需要格式化数值时，也可以使用chart.scale()界面:

chart.axis()界面中的标签种类用于标签的样式主题配置。

设置轴值范围

坐标轴的数值范围受数据约束，也可以通过chart.scale()界面进行配置。每个坐标轴数值范围的选择会导致最终可视化结果的差异:

设置轴刻度线的数量。

轴刻度线的默认数量是5。您还可以按chart.scale()自定义轴刻度线的数量。

设置轴的刻度线间距。

对于连续数据，G2也支持设置坐标轴上刻度线的间隔(tickInterval)，也需要在chart.scale()中配置，但需要注意的是tickInterval是原始数据值的差值，tickCount和tickInterval不能同时声明。

设置坐标系两端的边距。

默认情况下，分类数据的坐标轴两侧都有一定的边距，而连续数据的坐标轴两端没有边距。

在chart.scale()界面可以通过范围属配置两端的边距，分类数据范围的默认值为[1/(count & # 8211；1), 1 –1 /(计数& # 8211；1)]，count表示数据的个数，可以修改来改变空格的大小。