G2是一款可视化的统计图表软件，提供绘图引擎、完备图形语法和专业的设计规范，采用高交互可视化的图形语法，一条语句就可以使用canvas或者SVG构建出各种可交互的统计图表了，具有很强的易用性和扩展性。

基本简介

G2是一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。

软件特色

💯 完善的图形语法：数据到图形的映射，能够绘制出所有的图表。

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

🦍 强大的 View 模块：可支持开发个性化的数据多维分析图形。

👬 双引擎渲染：Canvas 或 SVG 任意切换。

💄 可视化组件体系：面向交互、体验优雅。

🛡 全面拥抱 TypeScript：提供完整的类型定义文件。

G2安装使用方法

安装

通过 npm 安装

npm install @antv/g2 --save

成功安装完成之后，即可使用 import 或 require 进行引用。

import { Chart } from '@antv/g2';

const chart = new Chart({

container: 'c1',

width: 600,

height: 300,

});

浏览器引入

既可以通过将脚本下载到本地也可以直接引入在线资源：

开始使用

在 G2 引入页面后，我们就已经做好了创建第一个图表的准备了。

下面是以一个基础的柱状图为例开始我们的第一个图表创建。

1. 创建 div 图表容器

在绘图前我们需要为 G2 准备一个 DOM 容器：

2. 编写图表绘制代码

创建 div 容器后，我们就可以进行简单的图表绘制：

new Chart() 创建 Chart 图表对象，指定图表所在的容器 id、图表的宽高、边距等信息;

chart.data() 载入图表数据源;

使用图形语法进行图表的绘制;

chart.render() 渲染图表。

常见问题

1、如何导出图片

考虑到 G2 使用环境的不同(浏览器、mobile 等)，G2 从 v4 版本开始，不再提供 chart.toDataURL() 以及 chart.downloadImage() 接口，鼓励用户自己包装。

可以参考以下工具函数(能覆盖大部分场景，但是不保证完全不存在兼容问题，仅供参考)

2、Tooltip 内出现了重复值

在绘制面积图时经常会遇到如下图的问题，本来是相同的数据却在 tooltip 上出现了两个值。

图表代码：

import { Chart } from '@antv/g2';

const data = [

{ year: '1991', value: 15468 },

{ year: '1992', value: 16100 },

{ year: '1993', value: 15900 },

{ year: '1994', value: 17409 },

{ year: '1995', value: 17000 },

{ year: '1996', value: 31056 },

{ year: '1997', value: 31982 },

{ year: '1998', value: 32040 },

{ year: '1999', value: 33233 },

];

const chart = new Chart({

container: 'container',

autoFit: true,

height: 500,

});

chart.data(data);

chart.scale({

value: {

min: 10000,

nice: true,

},

year: {

range: [0, 1],

},

});

chart.tooltip({

showCrosshairs: true,

shared: true,

});

chart.axis('value', {

label: {

formatter: (val) => {

return (+val / 10000).toFixed(1) + 'k';

},

},

});

chart.area().position('year*value').color('l(90) 0:#1890FF 1:#f7f7f7');chart.line().position('year*value');

chart.render();

原因解释：因为在代码中给 chart.area() 和 chart.line() 配置了不同的颜色，tooltip 去重规则会考虑颜色，颜色不同的视为不同的数据。

解决方案：

可以将其中一个 tooltip 关闭，比如 chart.area().tooltip(false)。

监听 chart.on('tooltip:change') 事件，动态修改 items 数据。

3、Legend 设置 marker.symbol 出错或不展示

G2 4.0 支持的 legend marker 标记类型(symbol)有："circle" | "square" | "line" | "diamond" | "triangle" | "triangle-down" | "hexagon" | "bowtie" | "cross" | "tick" | "plus" | "hyphen"，具体可以见 API

🗑️ triangleDown 标记类型移除，变更为 triangle-down

🗑️ hollow-* 等标记类型移除，可以通过设置 style 来达到空心的效果

更新日志

Refactor

refactor(geometry): 优化 label 和 element 的绑定逻辑 by @visiky in #3884

refactor(labels): 延迟 Geometry label 渲染,提升首屏渲染速度 by @visiky in #3886

feat: use worker to do label layout ?? by @visiky in #3888

注意：labels 延迟渲染，获取 labels 方式需要变更 (详见: #3891 )