G2Plot

G2Plot是一款图表设计软件，可以通过这款软件快速配置符合数据分析和数据统计使用的图表，软件通过图形语法编辑而成，为用户提供十多种常用的图表，包括折线图、柱状图、条形图、面积图、仪表盘、饼图、直方图、子弹图、瀑布图、水波图、雷达图、散点图，这些都是统计数据经常使用到的图表，您也可以使用提供的G2开发工具扩展企业需求的图表，让企业可以快速配置自己需要的可视化数据分析图表和交互图表，软件提供图表属设置，可以使用不同的颜色标注数据类型！

G2Plot介绍

G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，”G2Plot”中的 G2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了 ggplot2。

G2Plot软件功能

环图

在 G2Plot 中，只需要指定 innerRadius 就可以创建环形饼图

响应式图表

致力于解决图表在任何数据和显示尺寸下的基本可读问题

图层化设计方法

在 G2Plot 体系下，图表不仅仅只是各不相关的实例，图层概念的引入提供了多图表组合叠联动，共同讲述一个数据故事的可能

扇形图

通过设置饼图的 startAngle (开始角度) 和 endAngle (结束角度)，我们可以将饼图变成扇形图

子弹图

子弹图的发明是为了取代仪表盘上常见的那种里程表，时速表等基于圆形的表达方式

G2Plot软件特色

开箱即用

配置项优化精简，仅需几行代码轻松生成图表

默认好用

即使你是可视化或设计小白，也能制作优雅、标准的统计图表

响应式图表

保证图表在任何显示尺寸、任何数据状态下的可读

G2Plot教程

安装

浏览器引入

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

通过 npm 安装

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

// 推荐用法

npm install @antv/g2plot –save

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

import { Line } fm ‘@antv/g2plot’;

快速使用

在 G2Plot 引入页面后，我们就已经做好了创建第一个图表的准备了。下面以一个基折线图为例开始我们第一个图表的创建。

step1: 创建图表容器

step2: 引入数据。G2Plot 的数据源格式是 ON 数组，数组的每个元素是一个标准 ON 对象，部分图表除外。

step3: 创建并渲染图表

最终效果：

个化设置

图表元素的视觉样式采用默认主题的样式，还没有经过特别定制，图表主体中的文本元素也没有进行格式化，我们可以根据需求对图表进行各种个化设置，更多多配置请参考图表 API。

最终效果：

通过上面由浅入深的教程，你应该已经基本了解 G2Plot 的使用方法了，不过这远远不是终点，G2Plot 还有很多有趣的配置和特等待你的尝试和探索

G2Plot图表指引

饼图

1、定义

通过扇形区块的颜色和弧长（角度、面积）来展现数据的分类和占比情况。

2、何时使用

饼图通过扇形区块的面积，弧度和颜色等视觉标记，展现数据的分类和占比情况。它的特点是展现部分与部分之间，以及部分与整体的关系。部分相加之和等于整体的 100%，用整圆表示。

3、视觉通道

弧长

4、分析目的

比较、组成、占比

5、数据准备

1 个「无序名词」字段

1 个「数值」字段

设计指引

用法建议

分类数不超过 9 个

分类数量建议不超过9个,随着分类的增多,每个切片的面积变小,所以降低了视觉区分度。

将多个极小值合并展示

分类数量很多时,考虑将多个极小值合并在一起。

排列顺序

如果每个数值的差异不大,那么不建议使用饼图

何时将标签放在内部/外部

何时使用外部标签:在图形内部标记百分比%数据,在外部标记其他数据。

将文本和数值外置显示(拉线显示),(无拉线,图例显示,tooltip中显示)

将复合指标在环图中心位置处显示,或以指标卡形式显示在图表上部分

所有的项目相加之和为100%

每个部分数值不能为负;如果计算的是百分比,所有的项目相加之和为100%

元素

图形(Element)：饼图由扇形组成，环图由滑块组成。

图形标签(Label)：显示各个区块的占比（%），名称（华东、华南、华北）和实际数值（123.45）。

复合指标：在环图中心位置处显示，或以指标卡形式显示在图表上部分，。

图形辅助组件(Info Component)：图例，tooltip 或者指标卡等的组件支持。

G2Plot常见问题

以下整理了一些 G2Plot 社区常见的问题和答复，提问或新增 issue 前先看看。

怎么设置横轴从 0 开始

横轴的范范是可配置的，在 meta 里面配置即可，range 可选范围是 0~1。

双轴图如何共用一个 Y 轴

可以通过开启 scale 同步， 隐藏其中一个 y 轴坐标。