什么是 G2
上一篇
快速上手
下一篇
在前端框架中使用
Loading...
G2 是一个简洁的渐进式语法，主要用于制作基于网页的可视化。它提供了一套函数风格式、声明形式的 API 和组件化的编程范式，希望能帮助用户能快速完成报表搭建、数据探索、可视化叙事等多样化的需求。
这篇文章将给大家简单介绍一下 G2 的核心概念：
"Talk is cheap, show me the code"，那么接下来看看基于下面这个简单的数据集，G2 能做出什么可视化效果。
table({url: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',});
在 G2 官网的文档中，特定代码块会挂载其返回的 DOM，并在网页中展示。
(() => {const chart = new G2.Chart();// ...return chart.getContainer(); // 挂载图表的容器})();
这是在 G2 官网特定运行环境的语法，在实际项目中使用 G2 请参考快速上手。
标记是 G2 中最小的视觉单元，G2 中的所有图表都是由不同标记构成的。
(() => {const chart = new G2.Chart();chart.point().data({type: 'fetch',value:'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',}).encode('x', 'weight').encode('y', 'height').encode('color', 'gender');chart.render();return chart.getContainer();})();
转换会改变数据和标记的展现形式，多用于数据分析。
(() => {const chart = new G2.Chart();chart.rect().data({type: 'fetch',value:'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',}).encode('x', 'height').encode('color', 'gender').transform({ type: 'binX', y: 'count' }).transform({ type: 'stackY' }).style('insetLeft', 1);chart.render();return chart.getContainer();})();
比例尺用于控制标记的视觉样式。
(() => {const chart = new G2.Chart();chart.rect().data({type: 'fetch',value:'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',}).encode('x', 'height').encode('color', 'gender').transform({ type: 'binX', y: 'count' }).transform({ type: 'stackY' }).scale('color', { range: ['steelblue', 'orange'] }).scale('y', { nice: true }).style('insetLeft', 1);chart.render();return chart.getContainer();})();
坐标系会改变图表的展示形式。
(() => {const chart = new G2.Chart();chart.rect().data({type: 'fetch',value:'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',}).encode('x', 'height').encode('color', 'gender').transform({ type: 'binX', y: 'count' }).transform({ type: 'stackY' }).scale('color', { range: ['steelblue', 'orange'] }).scale('y', { type: 'sqrt', nice: true }).coordinate({ type: 'polar' }).axis('y', { title: false }).style('insetLeft', 1);chart.render();return chart.getContainer();})();
视图复合用于制作多视图图表。
(() => {const chart = new G2.Chart({paddingLeft: 60,});const facet = chart.facetRect().data({type: 'fetch',value:'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',}).encode('y', 'gender');facet.rect().encode('x', 'height').encode('color', 'gender').transform({ type: 'binX', y: 'count' }).transform({ type: 'stackY' }).scale('y', { nice: true }).attr('frame', false).style('insetLeft', 1);chart.render();return chart.getContainer();})();
动画支持分组动画和关键帧动画。可以点击左边的运行按钮看效果。
(() => {const chart = new G2.Chart();chart.rect().data({type: 'fetch',value:'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',}).encode('x', 'height').encode('color', 'gender').encode('enterDuration', 1000).transform({ type: 'stackEnter', groupBy: ['color'] }).transform({ type: 'binX', y: 'count' }).transform({ type: 'stackY' }).style('insetLeft', 1);chart.render();return chart.getContainer();})();
(async () => {const data = await fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',).then((res) => res.json());const chart = new G2.Chart();const keyframe = chart.timingKeyframe().attr('direction', 'alternate').attr('iterationCount', 4);keyframe.interval().attr('padding', 'auto').data(data).encode('x', 'gender').encode('color', 'gender').encode('key', 'gender').transform({ type: 'groupX', y: 'count' });keyframe.point().attr('padding', 'auto').data(data).encode('x', 'weight').encode('y', 'height').encode('color', 'gender').encode('groupKey', 'gender').encode('shape', 'point');chart.render();return chart.getContainer();})();
交互可以按需探索数据。
(() => {const chart = new G2.Chart();chart.point().data({type: 'fetch',value:'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',}).encode('x', 'weight').encode('y', 'height').encode('color', 'gender').encode('shape', 'point').style({fillOpacity: 0.7,transform: 'scale(1, 1)',transformOrigin: 'center center',}).state('inactive', {fill: 'black',fillOpacity: 0.5,transform: 'scale(0.5, 0.5)',}).interaction('brushXHighlight', true);chart.render();return chart.getContainer();})();
因为 G2 的标记是可以组合的，同时提供了复合标记的机制去扩展 G2，所以你基本上可以快速绘制任意的可视化。在案例页面你可以获得更多灵感，也可以通过文档全面了解 G2 的能力。