G2 绘图入门

在本篇中，将为你介绍 G2 的基本用法，文章可能有点长，但是可以帮助你更好得理解图形语法，入门 G2，请花点时间耐心阅读。通过本篇，你讲学到：

  • 如何将数据变量映射到图形属性上
  • 如何通过指定不同的几何标记来创建不同类型的图表
  • 如何使用分面
  • 如何调整图表外观

数据准备

为了可以更好地熟悉 G2 作图的细节，而不是去熟悉各种不同的数据集，本篇所有的图表都会使用同一份数据集，该数据集结构以及内容如下:

  1. [
  2.   { feature: 'Battery', value: 0.22, phone: 'iPhone' },
  3.   { feature: 'Brand', value: 0.28, phone: 'iPhone' },
  4.   { feature: 'Contract', value: 0.29, phone: 'iPhone' },
  5.   { feature: 'Design', value: 0.17, phone: 'iPhone' },
  6.   { feature: 'Internet', value: 0.22, phone: 'iPhone' },
  7.   { feature: 'Large', value: 0.02, phone: 'iPhone' },
  8.   { feature: 'Price', value: 0.21, phone: 'iPhone' },
  9.   { feature: 'Smartphone', value: 0.5, phone: 'iPhone' },
  10.   { feature: 'Battery', value: 0.27, phone: 'Samsung' },
  11.   { feature: 'Brand', value: 0.16, phone: 'Samsung' },
  12.   { feature: 'Contract', value: 0.35, phone: 'Samsung' },
  13.   { feature: 'Design', value: 0.13, phone: 'Samsung' },
  14.   { feature: 'Internet', value: 0.2, phone: 'Samsung' },
  15.   { feature: 'Large', value: 0.13, phone: 'Samsung' },
  16.   { feature: 'Price', value: 0.35, phone: 'Samsung' },
  17.   { feature: 'Smartphone', value: 0.38, phone: 'Samsung' },
  18.   { feature: 'Battery', value: 0.26, phone: 'Nokia Smartphone' },
  19.   { feature: 'Brand', value: 0.1, phone: 'Nokia Smartphone' },
  20.   { feature: 'Contract', value: 0.3, phone: 'Nokia Smartphone' },
  21.   { feature: 'Design', value: 0.14, phone: 'Nokia Smartphone' },
  22.   { feature: 'Internet', value: 0.22, phone: 'Nokia Smartphone' },
  23.   { feature: 'Large', value: 0.04, phone: 'Nokia Smartphone' },
  24.   { feature: 'Price', value: 0.41, phone: 'Nokia Smartphone' },
  25.   { feature: 'Smartphone', value: 0.3, phone: 'Nokia Smartphone' },
  26. ];

该数据集描述的是 iPhone，Samsung 以及 Nokia Smartphone 三款手机各个特征（feature）的评分情况（value）。

从该数据集可以看出，G2 接收的数据格式为标准的 JSON 数组。

绘制点图

现在我们使用 G2 来绘制一张简单的点图，我们将 feature 和 value 两个字段分别映射至图表的 x 和 y 轴上：

  • 使用 point 几何标记绘制点图；
  • 使用 position 通道，将对应的变量映射到 x 和 y 位置空间上。
  1. const data = [
  2.   { feature: 'Battery', value: 0.22, phone: 'iPhone' },
  3.   { feature: 'Brand', value: 0.28, phone: 'iPhone' },
  4.   { feature: 'Contract', value: 0.29, phone: 'iPhone' },
  5.   { feature: 'Design', value: 0.17, phone: 'iPhone' },
  6.   { feature: 'Internet', value: 0.22, phone: 'iPhone' },
  7.   { feature: 'Large', value: 0.02, phone: 'iPhone' },
  8.   { feature: 'Price', value: 0.21, phone: 'iPhone' },
  9.   { feature: 'Smartphone', value: 0.5, phone: 'iPhone' },
  10.   { feature: 'Battery', value: 0.27, phone: 'Samsung' },
  11.   { feature: 'Brand', value: 0.16, phone: 'Samsung' },
  12.   { feature: 'Contract', value: 0.35, phone: 'Samsung' },
  13.   { feature: 'Design', value: 0.13, phone: 'Samsung' },
  14.   { feature: 'Internet', value: 0.2, phone: 'Samsung' },
  15.   { feature: 'Large', value: 0.13, phone: 'Samsung' },
  16.   { feature: 'Price', value: 0.35, phone: 'Samsung' },
  17.   { feature: 'Smartphone', value: 0.38, phone: 'Samsung' },
  18.   { feature: 'Battery', value: 0.26, phone: 'Nokia Smartphone' },
  19.   { feature: 'Brand', value: 0.1, phone: 'Nokia Smartphone' },
  20.   { feature: 'Contract', value: 0.3, phone: 'Nokia Smartphone' },
  21.   { feature: 'Design', value: 0.14, phone: 'Nokia Smartphone' },
  22.   { feature: 'Internet', value: 0.22, phone: 'Nokia Smartphone' },
  23.   { feature: 'Large', value: 0.04, phone: 'Nokia Smartphone' },
  24.   { feature: 'Price', value: 0.41, phone: 'Nokia Smartphone' },
  25.   { feature: 'Smartphone', value: 0.3, phone: 'Nokia Smartphone' },
  26. ];
  28. const chart = new Chart({
  29.   container: 'mountNode',
  30.   autoFit: false,
  31.   width: 600,
  32.   height: 300,
  33. });
  35. chart.data(data);
  36. chart.point().position('feature*value');chart.render();

image.png

颜色、大小、形状等图形属性映射

颜色

为了区分 iPhone，Samsung 以及 Nokia Smartphone 三款手机，我们将 phone 字段映射到 color 图形通道上，通过颜色来区分不同手机的数据。

  1. chart
  2.   .point()
  3.   .position('feature*value')
  4.   .color('phone');

这个时候，G2 会根据 phone 字段数值类型，自动生成一张图例，用以展示数据取值与图形属性之间的对应关系。

image.png

形状

同样，我们可以通过点形状来区分不同手机的数据，所以我们又将 phone 字段映射至 shape 图形通道，并指定具体的 shape 形状：

  1. chart
  2.   .point()
  3.   .position('feature*value')
  4.   .color('phone')
  5.   .shape('phone', ['circle', 'square', 'triangle']);

这个时候你会发现，图例的 marker 样式也发生了变化：image.png

大小

为了让点更清晰，我们通过 size 图形通道适当放大这些点。

  1. chart
  2.   .point()
  3.   .position('feature*value')
  4.   .color('phone')
  5.   .shape('phone', ['circle', 'square', 'triangle'])
  6.   .size(6);

image.png

几何标记

几何标记即我们所说的点、线、面这些几何图形。G2 中并没有特定的图表类型（柱状图、散点图、折线图等）的概念，用户可以单独绘制某一种类型的图表，如饼图，也可以绘制混合图表，比如折线图和柱状图的组合。G2 生成的图表的类型，都是由几何标记决定的，比如：

  • geometry = 'point' 就可以绘制点图
  • geometry = 'line' 就可以绘制折线图
  • geometry = 'area' 就可以绘制面积图

折线图

下面我们就基于以上点图，来绘制折线图，我们只需要将 chart.point() 改为 chart.line() 即可：

  1. chart
  2.   .line()  .position('feature*value')
  3.   .color('phone');

image.png

你会发现图例发生了细微的变化，G2 的图例会根据 Geometry 的类型来生成对应的缩略图。

面积图

面积图的绘制也很简单，我们只需要将 chart.line() 替换成 chart.area() 即可：

  1. chart
  2.   .area()  .position('feature*value')
  3.   .color('phone');

image.png

叠加几何标记

当然我们还可以进行几何标记的叠加以实现混合图表的绘制：

  1. chart
  2.   .area()
  3.   .position('feature*value')
  4.   .color('phone');
  5. chart
  6.   .line()
  7.   .position('feature*value')
  8.   .color('phone');
  9. chart
  10.   .point()
  11.   .position('feature*value')
  12.   .color('phone')
  13.   .shape('circle');

image.png

我们还可以通过 adjust() 接口将数据进行调整，让数据以层叠的方式进行展示，即绘制层叠面积图：

  1. chart
  2.   .area()
  3.   .adjust('stack')  .position('feature*value')
  4.   .color('phone');
  5. chart
  6.   .line()
  7.   .adjust('stack')  .position('feature*value')
  8.   .color('phone');
  9. chart
  10.   .point()
  11.   .adjust('stack')  .position('feature*value')
  12.   .color('phone')
  13.   .shape('circle');

image.png

坐标系变化

我们还可以通过 chart.coordinate() 接口，一步将以上图形切换至极坐标系下：

  1. chart.coordinate('polar');

image.png

这样就变成了雷达图。

分面

上面我们已经介绍了使用图形属性（颜色和形状）类比较不同分组的方法，它可以帮助我们将所有的数据组都绘制在同一张图表上。而分面提供了另外一种方法：将一份数据按照某个维度分隔成若干子集，然后创建一个图表的矩阵，将每一个数据子集绘制到图形矩阵的窗格中。G2 提供了多种分面类型，在这里我们使用 rect 分面类型，对上述数据进行分割绘制：image.png

在这个例子中，我们以 phone 字段为分割维度，使用 rect 分面类型，以列分面的性质展示三个手机的各自的数据集。

  1. const chart = new Chart({
  2.   container: 'mountNode',
  3.   autoFit: false,
  4.   width: 600,
  5.   height: 300,
  6.   padding: [0, 100, 0, 40],
  7. });
  9. chart.data(data);
  10. chart.scale({
  11.   value: {
  12.     sync: true,
  13.   },
  14. });
  15. chart.facet('rect', {  fields: [null, 'phone'],  rowTitle: {    style: {      textAlign: 'start',      fontSize: 12,    },  },  eachView(view) {    view.area().position('feature*value');    view.line().position('feature*value');    view      .point()      .position('feature*value')      .shape('circle');  },});chart.render();

图表样式配置

G2 绘制的图表由以下基本元素组成：

image.png

  • Axis 坐标轴可以通过 chart.axis() 接口进行配置
  • Tooltip 提示信息可以通过 chart.tooltip() 接口进行配置
  • Legend 图例可以通过 chart.legend() 接口进行配置

如下代码所示，我们通过 chart.legend() 接口调整了图例的显示位置：

  1. chart.legend({
  2.   position: 'right-bottom',
  3. });

image.png

在这里我们只做一个大体的介绍，更详细的使用方式详见其他教程篇章。