English | 简体中文

G2

网站 • 教程文档 • �?�客 • 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

�?��? 版本

• 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 或者建议。

如需�??交代�?，请�?�从我们的贡献指�?�。

�?�系我们

钉钉群组�?��?: 30233731 / 35686967 (2 群)