快速上手

目前有两种使用 G2 的方式：

• 包管理器
• CDN

包管理器

如果使用了 Webpack，Rollup 等基于 Node 的打包工具，可以通过 NPM 或者 Yarn 等包管理器去安装 G2 。

# 通过 NPM 安装
npm install @antv/g2

# 通过 Yarn 安装
yarn add @antv/g2

安装成功之后给 G2 提供一个容器:

<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.options({
  type: 'interval',
  data,
  encode: { x: 'genre', y: 'sold' },
});

// 渲染可视化
chart.render();

CDN

G2 也提供了 UMD 版本，可以直接通过 CDN 加载，然后直接使用。这个时候的 Chart 对象可以通过命名空间 G2 去访问。

<script src="https://unpkg.com/@antv/g2/dist/g2.min.js"></script>
<script>
  // 准备数据
  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 G2.Chart({
    container: 'container',
  });

  chart.options({
    type: 'interval',
    data,
    encode: { x: 'genre', y: 'sold' },
  });

  // 渲染可视化
  chart.render();
</script>

旅途开始

不管使用哪种方式，如果你绘制出了如下的条形图，那么表示一切顺利，探索可视化和 G2 的旅程正式开始。

import { Chart } from '@antv/g2';

// 初始化图表实例并声明可视化
const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval',
  data: [
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ],
  encode: { x: 'genre', y: 'sold' },
});

chart.render();

在前端框架中使用

在线体验 G2

图表示例浏览超过 100+ 图表示例，涵盖柱状图、折线图、饼图、散点图等多种类型，无需任何环境配置即可在线体验 G2 的强大功能查看详情 →图表介绍涵盖 40+ 种图表类型的详细介绍，包含图表基础知识和适用场景分析，帮助您快速找到最适合的图表类型，是新手入门的最佳指南查看详情 →

常见问题

上手开发

基础知识

绘制图形

配置图表组件

坐标轴（Axis）图表的尺子，建立数据与视觉位置的映射关系，通过刻度、刻度值标签、网格线等元素帮助用户把数据数字和图表位置对应起来，可以通过配置格式化刻度值，调整刻度值标签位置等查看详情 →图例（Legend）图表的辅助元素，使用颜色、大小、形状区分不同数据类型，是非空间通道（color、opacity、size、shape）对应比例尺的可视化，支持数据筛选和交互查看详情 →标题（Title）指定图表的标题内容，一句话展示图表概要信息，由主标题和副标题两部分组成，可通过调整文本样式进行定制，默认无标题查看详情 →滚动条（Scrollbar）解决图表信息过于密集无法完全展示的问题，当内容超出显示区域时使用，可与 x 或 y 通道绑定，控制显示的部分内容，默认关闭查看详情 →缩略轴（Slider）辅助看数据的组件，将大量数据浓缩到一个轴上，既可宏观看数据全貌又可微观看片段，支持拖拽观察数据在一定区间内的演变，适用于大数据量场景查看详情 →提示信息（Tooltip）图表交互的核心组件之一，动态展示数据点详细信息（数值、百分比等），支持鼠标悬停、点击、触摸等多种触发方式，增强图表的交互性和可读性查看详情 →数据标签（Label）给图表添加标注的手段，包含数据点、连接线、文本数值等元素，通过简洁文字说明减少误解，强调关键数据或趋势，引导用户关注重要信息查看详情 →

布局交互

样式美化

高级特性