English | 简体中文

G2 5.0

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

✨ 特色

• æ¸?è¿›å¼?语法：结å?ˆå·¥ä¸šå’Œå­¦æœ¯å®žè·µï¼Œå®žçŽ°å›¾å½¢è¯­æ³•ã€?动画语法和交互语法。
• 丰富的标记：内置 10+ 基础标记，8+ 高阶标记。
• 高å?¯æ‰©å±•æ€§ï¼šæ??供统一机制扩展所有å?¯è§†åŒ–组件。
• 个性化风格：支æŒ?手绘ã€?圆角ã€?纹ç?†ç­‰é£Žæ ¼ã€‚
• 多环境渲染：支æŒ? Canvasã€?SVG 以å?Š WebGL，和 Node.js æœ?务端渲染。

🔨 开始使用

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

$ npm install @antv/g2@next

$ yarn add @antv/g2@next

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

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

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

// 声明�视化
chart
  .interval() // 创建一个 Interval 标记
  .data(data) // 绑定数�
  .encode('x', 'genre') // 编� x 通�
  .encode('y', 'sold'); // 编� y 通�

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

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

📮 �与贡献

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

📄 许��

MIT@AntV.