快速上手

安装

通过 npm 安装

快速上手 - 图1

  1. npm install @antv/g2 --save

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

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

浏览器引入

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

  1. <!-- 引入在线资源，选择你需要的 g2 版本以替换 version 变量 -->
  2. <script src="https://gw.alipayobjects.com/os/lib/antv/g2/{{version}}/dist/g2.min.js"></script>
  1. <!-- 引入本地脚本 -->
  2. <script src="./g2.js"></script>

你也可以直接通过 unpkg 下载。

开始使用

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

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

1. 创建 div 图表容器

在绘图前我们需要为 G2 准备一个 DOM 容器：

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

2. 编写图表绘制代码

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

  • 创建 Chart 图表对象，指定图表所在的容器 ID、图表的宽高、边距等信息；
  • 载入图表数据源；
  • 使用图形语法进行图表的绘制；
  • 渲染图表。
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>柱状图</title>
  6.     <!-- 引入 G2 文件 -->
  7.     <script src="{{ url.g2 }}"></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.       ];
  21.       // Step 1: 创建 Chart 对象
  22.       const chart = new G2.Chart({
  23.         container: 'c1', // 指定图表容器 ID
  24.         width: 600, // 指定图表宽度
  25.         height: 300, // 指定图表高度
  26.       });
  28.       // Step 2: 载入数据源
  29.       chart.data(data);
  31.       // Step 3：创建图形语法，绘制柱状图
  32.       chart.interval().position('genre*sold');
  34.       // Step 4: 渲染图表
  35.       chart.render();
  36.     </script>
  37.   </body>
  38. </html>

这样，你的第一个柱状图就绘制完成了! 快速上手 - 图2 你也可以进入 G2 图表示例页面查看更多例子。

在 React / Vue / Angular 中使用 G2

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