本章主要以绘制散点图为例来引出并介绍组成 G2 图表的基本图形语法元素,每种语法元素都会有相应的章节进行详细的讲解。

场景

下表展示的是某一年不同性别群体的身高和体重数据,这组数据包含了很多有用的信息:

(1)身高和体重的相关关系如何?

(2)整体数据集的分布情况如何,身高和体重分别在哪一个数据段比较集中?

(3)不同性别的身高、体重分布又如何?

性别 身高(cm) 体重(kg)
167.5 59
161.2 51.6
176 86.4
... ... ...
180.3 82.8

绘制散点图

设置数据源

图形语法最基础的部分就是数据,通过 chart.source(data[, colDefs, colDims]) 方法为 G2 图表载入数据源。其中参数分别代表:

  • data 数据源, JSON 数据格式或者 Frame 数据集合;
  • colDefs 列定义对象 object,用于定义数据属性的度量类型等;
  • colDims 源数据包含属性名,用于当数据集中含有不同数据属性的记录的情况。

图形语法

chart.point().position('height*weight').color('gender');

以下就对上句语法进行详细的说明:

Geom 选择

散点图也叫 X-Y 图,它将所有的数据以的形式展现在笛卡尔坐标系上,以显示变量之间的相互影响程度,所以绘制时我们需要选择 chart.point() 来创建一个图层。如前面所述,Geom 决定了图表中图形的形状,包括点、线、面、多边形等。如柱状图的几何对象为 interval,散点图对应 point,折线图对应 line。下表展示了常见的图表对应的 geom,另外通过设置数据的 Adjust 调整方式,还可以绘制出更多的图表。

图表 geom
点图(散点图、气泡图) point
折线图 line
柱状图、饼图、玫瑰图 interval

目前 G2 提供的 geom 支持的类型如下:

chart.<geom>()

  • point: 将数据展示成一个个的点;
  • path: 将数据连接成一条线,不保证数据的顺序;
  • line: 一种特殊的 path (路径),x 轴上的数据进行排序;
  • area: 将线图进行闭合,中间区域填充,构成区域图;
  • interval: 使用矩形、弧形表示数据的上下区间,可以用来生成柱状图、直方图、饼图等图表;
  • polygon: 用于绘制地图、treemap 等多边形的图表;
  • schema: 自定义图,用于自定义各种图表,可以用于展示箱型图、蜡烛图等图表;
  • heatmap: 用于绘制热力图;
  • contour: 用于绘制等高线。
  • edge: 点与点之间的边,可以用于绘制树、流程图、网络

Attr 图形属性映射

散点图中,点(Point)的位置由变量的数值决定。每个点不仅有横坐标、纵坐标,还有大小、颜色和形状这些图形属性(Attr,每个图形属性都可以映射为一个变量或者为一个常数)。上图中我们使用数据中的 height(高度)属性控制点的横轴位置,weight(体重)属性控制点的纵轴位置,gender(性别)来决定点的颜色,而点的大小和形状没有指定,所以直接使用 G2 提供的默认设置。下表展示的数据或许更有利于大家对图形属性映射的理解:

color --> gender x --> height y --> weight
167.5 59
161.2 51.6
176 86.4
... ... ...
180.3 82.8

G2 中支持的图形属性映射如下;

chart.<geom>().<attr>(dims[, cfg]):

  • position(dim):将对应字段的值映射到图形的位置;
  • color(dim[, colors]):用对应字段的值或者常量来表示图形的颜色,如果传入 colors 会根据传入的颜色分配颜色;
  • shape(dim[, shapes]):用对应字段的值或者常量来表示图形的形状,如果传入 shapes