antvis

G2

? A highly interactive data-driven visualization grammar for statistical charts.
Under MIT License
By antvis

canvas statistics graphics data-visualization grammar visualization charts graph svg interaction data-driven

English | 简体中文

G2

一套面向常规统计图表,以数据驱动的高交互可视化图形语法。

[![](https://img.shields.io/travis/antvis/g2.svg)](https://travis-ci.org/antvis/g2) ![CI](https://github.com/antvis/G2/workflows/CI/badge.svg) [![Coverage Status](https://coveralls.io/repos/github/antvis/G2/badge.svg?branch=master)](https://coveralls.io/github/antvis/G2?branch=master) [![NPM Package](https://img.shields.io/npm/v/@antv/g2.svg)](https://www.npmjs.com/package/@antv/g2) [![NPM Downloads](http://img.shields.io/npm/dm/@antv/g2.svg)](https://npmjs.org/package/@antv/g2) ![Dependencies](https://img.shields.io/badge/dependencies-up%20to%20date-brightgreen.svg) [![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g2.svg)](http://isitmaintained.com/project/antvis/g2 'Percentage of issues still open') [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=shields)](https://github.com/antvis/g2/pulls)

![](https://img.shields.io/badge/language-TypeScript-red.svg) ![](https://img.shields.io/badge/license-MIT-000000.svg)

[![](https://img.shields.io/twitter/follow/AntV_Alipay.svg?label=AntV&style=social)](https://twitter.com/AntV_Alipay)


网站 •
教程文档 •
博客 •
G2Plot

G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性。使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。


? 线上示例


✨ 特性

? 安装

bash
$ npm install @antv/g2


? 快速上手


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


```html

```


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


const data = [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
];


// Step 1: 创建 Chart 对象
const chart = new Chart({
container: 'c1', // 指定图表容器 ID
width: 600, // 指定图表宽度
height: 300, // 指定图表高度
});


// Step 2: 载入数据源
chart.data(data);


// Step 3: 创建图形语法,绘制柱状图
chart.interval().position('genre*sold');


// Step 4: 渲染图表
chart.render();
```


⌨ 本地开发

```bash


安装依赖

$ npm install


运行测试用例

$ npm run test


打开 electron 运行测试用例,监听文件变化构建

$ npm run test-live


运行 CI

$ npm run ci


运行网站

$ npm start
```


? 版本


你也可以在业务中使用基于 G2 封装的常规统计图表 G2Plot,可以使用配置的方式快速生成一个通用图表,降低开发者的使用成本。



? 如何贡献

如果您在使用的过程中碰到问题,可以先通过 issues 看看有没有类似的 bug 或者建议。


如需提交代码,请遵从我们的贡献指南。



联系我们

钉钉群组号码: 30233731