Skip to content
/ G2 Public
forked from antvis/G2

📊 A highly interactive data-driven visualization grammar for statistical charts.

License

Notifications You must be signed in to change notification settings

lkxian888/G2

This branch is 61 commits behind antvis/G2:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

e62d824 · May 10, 2022
Mar 23, 2022
Sep 23, 2021
Apr 16, 2020
Apr 21, 2022
Apr 22, 2022
Aug 8, 2021
May 10, 2022
Nov 22, 2020
Apr 22, 2022
Nov 27, 2019
Sep 3, 2019
Sep 23, 2021
Sep 14, 2020
Nov 9, 2020
Sep 3, 2019
May 10, 2022
Aug 6, 2021
Feb 25, 2020
Sep 3, 2019
Nov 29, 2021
Nov 29, 2021
Apr 7, 2021
Dec 27, 2019
Nov 21, 2021
May 10, 2022
Apr 20, 2022
Dec 24, 2019
Sep 15, 2021

Repository files navigation

English | 简体中文

G2

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

CI Coverage Status NPM Package NPM Downloads Dependencies Percentage of issues still open PRs Welcome

网站教程文档博客G2Plot

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

📺 线上示例

✨ 特性

  • 💯 完善的图形语法:数据到图形的映射,能够绘制出所有的图表。
  • 🤩 全新的交互语法:通过触发和反馈机制可以组合出各种交互行为,对数据进行探索。
  • 🦍 强大的 View 模块:可支持开发个性化的数据多维分析图形。
  • 👬 双引擎渲染:Canvas 或 SVG 任意切换。
  • 💄 可视化组件体系:面向交互、体验优雅。
  • 🛡 全面拥抱 TypeScript:提供完整的类型定义文件。

📦 安装

$ npm install @antv/g2

🔨 快速上手

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

<div id="c1"></div>
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();

⌨️ 本地开发

# 安装依赖
$ npm install

# 运行测试用例
$ npm run test

# 打开 electron 运行测试用例,监听文件变化构建
$ npm run test-live

# 运行 CI
$ npm run ci

# 运行网站
$ npm start

🏷️ 版本

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

🤝 如何贡献

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

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

Let's fund issues in this repository

联系我们

钉钉群组号码: 30233731 / 35686967 (2 群)

About

📊 A highly interactive data-driven visualization grammar for statistical charts.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 99.3%
  • Other 0.7%