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@rc$ yarn add @antv/g2@rc�?功安装之�?�，�?�以通过 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.
