Need help with G2?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

antvis
10.9K Stars 1.3K Forks MIT License 3.6K Commits 147 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

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 容器:

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

🏷️ 版本

  • v3.5.x: https://github.com/antvis/G2/tree/v3.5.x
  • v4.0.x: https://github.com/antvis/G2/tree/v4.0.x

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

🤝 如何贡献

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

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

Let's fund issues in this repository

联系我们

钉钉群组号码: 30233731

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.