English | 简体中文

G2 5.0

G2 5.0 å?‘布了 Beta 版本，4.x 稳定版在 master 分支上。

G2 èµ·æº?于 Wilkinson 的图形语法：《Grammar of Graphics》，但å?ˆä¸?止于图形语法。

✨ 特色

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

🔨 开始使用

å?¯ä»¥é€šè¿‡ NPM 或 Yarn 等包管ç?†å™¨æ?¥å®‰è£…。

$ npm install @antv/g2@beta

$ yarn add @antv/g2@beta

æˆ?功安装之å?Žï¼Œå?¯ä»¥é€šè¿‡ 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',
});

// 声明å?¯è§†åŒ–
chart
  .interval() // 创建一个 Interval 标记
  .data(data) // 绑定数æ?®
  .encode('x', 'genre') // 编ç ? x 通é?“
  .encode('y', 'sold'); // 编ç ? y 通é?“

// 渲染å?¯è§†åŒ–
chart.render();

如果一切顺利，你å?¯ä»¥å¾—到下é?¢çš„柱状图!

📮 å?‚与贡献

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

📄 许å?¯è¯?

MIT@AntV.