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.