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 群)