快速上手

G2

G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。

特性

  • 简单、易用
  • 完备的可视化编码
  • 强大的扩展能力

安装

浏览器引入

既可以通过将脚本下载到本地也可以直接引入在线资源；

  1. <!-- 引入在线资源 -->
  2. <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.2.7/dist/g2.min.js"></script>
  1. <!-- 引入本地脚本 -->
  2. <script src="./g2.js"></script>

通过 npm 安装

快速上手 - 图1

我们提供了 G2 npm 包，通过下面的命令即可完成安装

  1. npm install @antv/g2 --save

成功安装完成之后，即可使用 import 或 require 进行引用。

  1. import G2 from '@antv/g2';
  2.  
  3. const chart = new G2.Chart({
  4.   container: 'c1',
  5.   width: 600,
  6.   height: 300
  7. });

开始使用

在 G2 引入页面后，我们就已经做好了创建第一个图表的准备了。

下面是以一个基础的柱状图为例开始我们的第一个图表创建。

浏览器引入方式

1. 创建 div 图表容器

在页面的 body 部分创建一个 div，并制定必须的属性 id：

  1. <div id="c1"></div>

2. 编写图表绘制代码

创建 div 容器后，我们就可以进行简单的图表绘制:

  • 创建 Chart 图表对象，指定图表所在的容器 ID、指定图表的宽高、边距等信息；
  • 载入图表数据源；
  • 使用图形语法进行图表的绘制；
  • 渲染图表。
    这部分代码用 <script></script>，可以放在页面代码的任意位置（最好的做法是放在 </body> 之前）。
  1. const data = [
  2.   { genre: 'Sports', sold: 275 },
  3.   { genre: 'Strategy', sold: 115 },
  4.   { genre: 'Action', sold: 120 },
  5.   { genre: 'Shooter', sold: 350 },
  6.   { genre: 'Other', sold: 150 }
  7. ]; // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
  8. // Step 1: 创建 Chart 对象
  9. const chart = new G2.Chart({
  10.   container: 'c1', // 指定图表容器 ID
  11.   width : 600, // 指定图表宽度
  12.   height : 300 // 指定图表高度
  13. });
  14. // Step 2: 载入数据源
  15. chart.source(data);
  16. // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
  17. chart.interval().position('genre*sold').color('genre')
  18. // Step 4: 渲染图表
  19. chart.render();

完成上述两步之后，保存文件并用浏览器打开，一张柱状图就绘制成功了：

完整的代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>柱状图</title>
  6.     <!-- 引入 G2 文件 -->
  7.     <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.2.7/dist/g2.min.js"></script>
  8.   </head>
  9.   <body>
  10.     <!-- 创建图表容器 -->
  11.     <div id="c1"></div>
  12.     <script>
  13.       const data = [
  14.         { genre: 'Sports', sold: 275 },
  15.         { genre: 'Strategy', sold: 115 },
  16.         { genre: 'Action', sold: 120 },
  17.         { genre: 'Shooter', sold: 350 },
  18.         { genre: 'Other', sold: 150 }
  19.       ]; // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
  20.       // Step 1: 创建 Chart 对象
  21.       const chart = new G2.Chart({
  22.         container: 'c1', // 指定图表容器 ID
  23.         width : 600, // 指定图表宽度
  24.         height : 300 // 指定图表高度
  25.       });
  26.       // Step 2: 载入数据源
  27.       chart.source(data);
  28.       // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
  29.       chart.interval().position('genre*sold').color('genre')
  30.       // Step 4: 渲染图表
  31.       chart.render();
  32.     </script>
  33.   </body>
  34. </html>

在 React / Vue / Angular 中使用 G2

基于 AntV 技术栈还有许多优秀的项目，在 React 环境下使用 G2，我们推荐可以尝试使用 BizCharts 和 Viser-react！这两个产品都是基于 G2 的 React 版本封装，使用体验更符合 React 技术栈的习惯，他们都与 AntV 有着紧密的协同，他们很快也将同步开源和发布基于 G2 3.0 的版本。

此外，Viser 并不是针对 React 做的适配，它是对 G2 3.0 通用的抽象。通过基于 Viser 封装，现在已经支持对 React、 Angular 和 Vue 三个常用框架的深度整合，对应的是 viser-react、viser-ng 和 viser-vue。对，你都有机会用到一样的使用体验。当然，你甚至可以自己动手来封装针对任何库的版本，如果需要的话。Viser 提供了这种自定义的扩展能力，而且成本非常低。

BizCharts 地址：https://alibaba.github.io/BizCharts/Viser 地址：https://viserjs.github.io/

体验改进计划说明

为了更好服务用户，G2 会将 URL 和版本信息发送回 AntV 服务器：

  1. https://kcart.alipay.com/web/bi.do

除了 URL 与 G2 版本信息外，不会收集任何其他信息，一切为了能对 G2 的运行情况有更多了解，以更好服务于用户。如有担心，可以通过下面的代码关闭：

  1. // 关闭 G2 的体验改进计划打点请求
  2. G2.track(false)

原文: https://antv.alipay.com/zh-cn/g2/3.x/tutorial/index.html