Facet

1 min read

分面(Facet)是指利用 G2 提供的 View 递归嵌套能力,将一份数据按照某个维度分隔成若干子集,然后创建一个图表的集合,将每一个数据子集绘制到图表矩阵的窗格中。

分面主要提供了两个功能:

  1. 按照指定的维度划分数据集;
  2. 对图表进行排版和布局。

对于探索型数据分析来说,分面是一个强大有力的工具,能帮我们快速地分析出数据各个子集模式的异同。目前 G2 内置的分面包括六种:rect、list、circle、tree、mirror 和 matrix,具体描述如下表所示:

分面类型说明
rect默认类型,指定 2 个维度作为行列,形成图表的矩阵。
list指定一个维度,可以指定一行有几列,超出自动换行。
circle指定一个维度,沿着圆分布。
tree指定多个维度,每个维度作为树的一级,展开多层图表。
mirror指定一个维度,形成镜像图表。
matrix指定一个维度,形成矩阵分面。

具体 API 如下:

图表容器

width

optional number default: 400

设置图表宽度。

height

optional number default: 400

设置图表高度。

autoFit

optional boolean default: true

图表是否自适应容器宽高。当 autoFit 设置为 true 时,widthheight 的设置将失效。

appendPadding

optional number[] | number

额外增加的 appendPadding 值,在 padding 的基础上,设置额外的 padding 数值,可以是单个数字 16,或者数组 [16, 8, 16, 8] 代表四个方向。

renderer

optional string default: canvas

设置图表渲染方式为 canvassvg

pixelRatio

optional number default: window.devicePixelRatio

设置图表渲染的像素比,和底层的 devicePixelRatio 含义一致,一般不用设置,除非在页面有整体 scale 的情况下,可以自定义。

limitInPlot

optional boolean

是否对超出坐标系范围的 Geometry 进行剪切。

FacetCfg

FacetCfg.type

string optional 可选项:'rect' | 'list' | 'circle' | 'tree' | 'mirror' | 'matrix';

分面类型。

分面类型说明
rect默认类型,指定 2 个维度作为行列,形成图表的矩阵。矩形分面是 G2 的默认分面类型。支持一个或者两个维度的数据划分,按照先列后行的顺序进行配置。
list指定一个维度,可以指定一行有几列,超出自动换行。水平列表分面可以通过设置 cols 属性来指定每行可显示分面的个数,超出时会自动换行。
circle指定一个维度,沿着圆分布。
tree指定多个维度,每个维度作为树的一级,展开多层图表。树形分面一般用于展示存在层次结构的数据,展示的是整体和部分之间的关系。
mirror指定一个维度,形成镜像图表。
matrix指定一个维度,形成矩阵分面。矩阵分面主要对比数据中多个字段之间的关系,例如常见的散点矩阵图。

FacetCfg.fields

string[] optional

指定数据集划分依据的字段。

FacetCfg.padding

number | number[] | 'auto' optional

每个 facet 的内边距,设置方式参考 css 盒模型。

FacetCfg.showTitle

boolean optional

是否显示标题。

FacetCfg.title

FacetTitle optional

标题样式。

FacetTitle 配置如下:

参数名类型默认值描述
offsetXnumber-x 方向偏移
offsetYnumber-y 方向偏移
styleShapeAttrs-文本样式
formatter(val: any) => any-回调配置 title 内容

FacetCfg.cols

number optional
指定每行可显示分面的个数,超出时会自动换行。适用于 list 分面

FacetCfg.line

Line optional
适用于 tree 分面

设置树线条的样式。Line 配置如下:

参数名类型是否必选默认值描述
styleShapeAttrs-线条样式
smoothboolean-线条是否平滑

FacetCfg.transpose

boolean optional default: false
是否翻转,默认为 false。通过配置该值为 true,可以将镜像分面翻转。适用于 mirror 分面

FacetCfg.columnTitle

FacetTitle optional
列标题的样式。适用于 rect 分面 matrix 分面

FacetTitle 配置如下:

参数名类型默认值描述
offsetXnumber-x 方向偏移
offsetYnumber-y 方向偏移
styleShapeAttrs-文本样式
formatter(val: any) => any-回调配置 title 内容

FacetCfg.rowTitle

FacetTitle optional
行标题的样式。适用于 rect 分面 matrix 分面

FacetTitle 配置如下:

参数名类型默认值描述
offsetXnumber-x 方向偏移
offsetYnumber-y 方向偏移
styleShapeAttrs-文本样式
formatter(val: any) => any-回调配置 title 内容

FacetCfg.eachView

ViewCallback optional

使用回调函数配置每个 view 中具体的绘图表现,回调函数返回参数同 mix 图表的 plots 配置

type ViewCallback = (innerView: View, facet?: FacetData) => IPlot;

其中 FacetData 结构如下:

属性类型描述
typestring分面类型
dataobject[]当前分面子 view 的数据
regionRegion当前分面子 view 的范围,Region 结构见下面
paddingnumber当前分面子 view 的 padding
viewView当前 facet 对应生成的 view
rowFieldstring分面行字段
columnFieldstring分面列字段
rowValuestring当前行分面的枚举值
columnValuestring当前列分面的枚举值
rowIndexnumber当前行索引
columnIndexnumber当前列索引
rowValuesLengthnumber当前行字段的枚举值长度
columnValuesLengthnumber当前列字段的枚举值长度
childrenTreeData[]只有 tree 类型分面有,树 children 数据
originColIndexnumber只有 tree 类型分面有,原始数据列 index

IPlot

IPlot.type

必选 string

plot 类型,通过传入指定 type 的 plot,可以在图层上渲染 G2Plot 内置的图表。

目前开放的图表类型有以下类型:

  • 基础图表'line' | 'pie' | 'column' | 'bar' | 'area' | 'gauge' |'scatter' | 'histogram' | 'funnel'
  • 迷你图表'tiny-line' | 'tiny-column' | 'tiny-area' | 'progress' | 'ring-progress'

IPlot.options

必选 object[]

plot 的具体配置项。每个 plot 都有自己的图层容器设置(不包括:width, height)以及数据、字段、样式等配置。

具体配置项见指定 plot 的 API 文档。如:type='column'时,options 对应 ColumnOptions,见文档: Column API

type IPlot =
  | {
      type: 'line';
      options: Omit<LineOptions, 'width' | 'height'>;
    }
  | {
      type: 'pie';
      options: Omit<PieOptions, 'width' | 'height'>;
    }
  | {
      // ... 等等
    };