G2

A concise and progressive visualization grammar.

Charting
antvis/G2@antv/g2

README

[English](./README.en-US.md) | 简体中文

G2


一套面向常规统计图表，以数据驱动的高交互可视化图形语法。
undefined CI Coverage Status NPM Package NPM Downloads Dependencies Percentage of issues still open PRs Welcome

undefined undefined
undefined

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


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

📺 线上示例



✨ 特性


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

📦 安装


  1. ``` sh
  2. $ npm install @antv/g2
  3. ```

🔨 快速上手



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

  1. ``` html
  2. <div id="c1"></div>
  3. ```

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

  4. const data = [
  5.   { genre: 'Sports', sold: 275 },
  6.   { genre: 'Strategy', sold: 115 },
  7.   { genre: 'Action', sold: 120 },
  8.   { genre: 'Shooter', sold: 350 },
  9.   { genre: 'Other', sold: 150 },
  10. ];

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

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

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

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

⌨️ 本地开发


  1. ``` sh
  2. # 安装依赖
  3. $ npm install

  5. # 运行测试用例
  6. $ npm run test

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

  11. # 运行 CI
  12. $ npm run ci

  14. # 运行网站
  15. $ npm start
  16. ```

🏷️ 版本


- 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 / 35686967 (2 群) / 44788198 （3 群）