English | 简体中文

G2 5.0

G2 5.0 �在开�中，4.x 稳定版在 master 分支上.

G2 çš„å??å­—æ?¥è‡ªäºŽ Wilkinson 的《Grammar of Graphics》，并在功能和 API 设计上深å?—它的å?¯å?‘。这里有一些资æº?å?¯ä»¥å¸®åŠ©ä½ å¼€å§‹ä½¿ç”¨å®ƒï¼š

• 介ç»?：概述和开å?‘动机
• 案例：大é‡?å?¯ä¾›å­¦ä¹ å’Œå¤?制粘贴的案例
• 教程：交互å¼?案例驱动的教程，帮助你了解核心概念
• API：所有å?¯è§†åŒ–组件的完整文档

✨ 特色

• æ¸?è¿›å¼?使用：å?¯ä»¥é€šè¿‡ç®€æ˜Žçš„声明，快速获得有æ„?义的å?¯è§†åŒ–图表，G2 会在内部会å?šå‡ºå?ˆç?†çš„推断。但是针对å¤?æ?‚和高级的场景，ä»?然å?¯ä»¥æ·»åŠ æ›´å¤šçš„é…?置去满足你的需求。
• 声明å¼? API：我们采用了函数å¼?的声明å¼? API，å?¯ä»¥é€šè¿‡æ›´å…·ç¼–程风格的方å¼?指定图表é…?置，这有助于更好地é‡?用逻辑和更ç?µæ´»åœ°ç»„织代ç ?。
• 高å?¯æ‰©å±•æ€§ï¼šä¸ºäº†æ»¡è¶³å?„ç§?特定需求，G2 æ??供了一个方便和一致的机制æ?¥æ‰©å±•ä½ èƒ½æƒ³è±¡åˆ°çš„一切，无论是一个比例尺，一个å?˜æ?¢è¿˜æ˜¯ä¸€ä¸ªè§†è§‰å…ƒç´ ï¼Œç­‰ç­‰ã€‚你甚至å?¯ä»¥åŸºäºŽè¿™ä¸ªæœºåˆ¶å®šåˆ¶ä¸€ä¸ªå…¨æ–°çš„å?¯è§†åŒ–工具。
• å…¨é?¢çš„语法：和传统å?¯è§†åŒ–工具ä¸?å?Œï¼ŒG2 中没有图表的概念，而是通过组å?ˆè§†è§‰å…ƒç´ ã€?å?˜æ?¢ã€?比例尺ã€?å??标系å?˜æ?¢å’Œè§†å›¾å¤?å?ˆæ?¥èŽ·å¾—图表。除了é?™æ€?å?¯è§†åŒ–之外，还支æŒ?制作由数æ?®é©±åŠ¨çš„å?¯è§†åŒ–动画，并且æ??供了一套精心设计的基于 Action 的交互语法。
• 强大的渲染引擎：在 G2 底层有一个强大的渲染器 G，å?¯ç”¨ä½¿ç”¨ Canvasã€?SVG 以å?Š WebGL 生æˆ?基于网页的å?¯è§†åŒ–。å?Œæ—¶ G æ??供了大é‡?çš„æ?’件，使得 G2 能够绘制拥有新颖风格的图表（比如手绘风格）并且å?¯ä»¥å¹¶å®Œå…¨æ‹¥æŠ± D3 的生æ€?。

🔨 开始使用

�以通过 npm 或 Yarn 等包管�器�安装。

$ npm install @antv/g2

$ yarn add @antv/g2

�功安装之�，�以通过 import 导入 Chart 对象。

<div id="chart"></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 },
];

// 实例化图表并且指定容器的 id
const chart = new Chart({
  container: 'chart',
});

// 声明�视化
chart
  .interval() // 创建一个 Interval 的视觉元素，并且添加到图表中
  .data(data) // 给这个视觉元素绑定数�
  .encode('x', 'genre') // 将 genre 对应的列数�和 x �置通�绑定
  .encode('y', 'sold'); // 将 sold 对应的列数�和 y �置通�绑定

// 将�视化渲染进指定的容器
chart.render();

如果一切顺利，你�以得到下�的柱状图!

📮 �与贡献

• 问题： 报告 bug 或者æ??出需求
• 贡献指å?—：å?‚与建设 G2
• 讨论：在 Github 上或者钉钉群里é?¢è®¨è®ºï¼ˆ30233731, 35686967, 44788198）

📄 许��

MIT@AntV.