README

English | 简体中文


G2：一套简明和渐进式的可视化语法




简洁的渐进式可视化语法，用于构建仪表盘、数据探索以及数据讲故事。




  介绍 •
  案例 •
  教程 •
  API •
  Editor









!examples



G2 起源于 Leland Wilkinson 的图形语法：《The Grammar of Graphics》，但又不止于图形语法。

 ✨ 特色

- 渐进式语法：结合工业和学术实践，实现图形语法、动画语法和交互语法。
- 丰富的标记：内置 10+ 基础标记，8+ 高阶标记。
- 高可扩展性：提供统一机制扩展所有可视化组件。
- 个性化风格：支持手绘、圆角、纹理等风格。
- 多环境渲染：支持 Canvas、SVG 以及 WebGL，和 Node.js 服务端渲染。

 🔨 开始使用

可以通过 NPM 或 Yarn 等包管理器来安装。

bash
$ npm install @antv/g2


bash
$ yarn add @antv/g2


成功安装之后，可以通过 import 导入 Chart 对象。

html



js
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 },
];

// 初始化图表实例
const chart = new Chart({
  container: 'container',
});

// 声明可视化
chart.options({
  // 创建一个 Interval 标记
  type: 'interval',

  // 绑定数据
  data: data,
  encode: {
    // 编码 x 通道
    x: 'genre',
    // 编码 y 通道
    y: 'sold',
    // 编码 color 通道
    color: 'genre',
  },
});

// 渲染可视化
chart.render();


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



 🌍 生态

- g2-react - G2 的轻量级 React 组件，没有额外特性。
- g2-extensions - G2 的一系列插件库，包含 3D 和智能可视化等。
- ant-design-charts - React 图表库，基于 G2, G6, X6, L7Plot.
- 更多...

 📮 参与贡献

感谢所有为这个项目做出贡献的人，感谢所有支持者！🙏


  
 


- 问题： 报告 bug 或者提出需求
- 贡献指南：参与建设 G2
- 讨论：在 GitHub 上或者钉钉群里面讨论（30233731, 35686967, 44788198）




 📄 许可证

MIT@AntV.