Antv/S2 基于Canvas的高性能多维分析表格

导读

表，是日常生活工作中被广泛使用的图表之一，说到它的起源大概要从结绳记事，易货交易说起。那时为了交易计算方便，人们就开始拿根小木棍在地上画画写写，渐渐地开始有了最雏形的统计表格。

图1：结绳记事

从记录一维数据的统计表格到两维（两个变量）、直至多维（多个变量)的表格，逐渐承载着用户多维世界的思考，它们提供了多个变量之间相互关系的基本画面，帮助人们发现大数据之间的相互作用，进而进行深入的交叉探索分析，于是有了目前商业 BI 分析领域中使用频率最高的图表之一「多维交叉分析表格」。

图2：表格维度空间映射

市面上开源的表格非常多，大都是基于一维数据的展示型表格，然而好用且能开箱即用的多维分析表格却少之又少。想要实现一个下图这样复杂的透视表格，不仅需要大量的代码逻辑去定制开发，还很难解决在大数据量下的性能瓶颈问题。

图3：KPI趋势表-Powered by S2

S2 是什么

S2 是 AntV 团队推出的数据表可视化引擎，旨在提供高性能、易扩展、美观、易用的多维表格。不仅有丰富的分析表格形态，还内置丰富的交互能力, 帮助用户更好地看数和做决策。

S 取自于 SpreadSheet 的两个 S，2 也代表了透视表中的行列两个维度。

图4：表体结构

S2 能做什么

多维表用户一般为数据分析师或运营，数据类型为海量点数据，使用多维数据分析场景：通过数据明细，一是有目标性的探查异动发生原因；二是无目标性的探索新洞见新机会。

举个🌰，互联网运营在做人群运营的时候，前期需要找到优先运营人群，即需对人群进行细分和查看基本画像。我们将行列分别放置人群年龄、城市、岗位等维度，数据单元格中通过颜色对人群规模进行染色，便于不同维度交叉下的规模对比。

图5: 单人群占比表

而这样一张表，往往会解决多个场景诉求。

• 场景1: 通过深色热力快速找到大规模占比的人群，通过行列维度查看大规模人群的用户画像
• 场景2：通过行列人群属性不同维度交叉分析找到目标人群，查看画像（长什么样，喜欢什么），进行针对性的运营投放策略。

图6：分析思路

基于目标用户和场景下确定了 S2 多维表格高屏效的设计原则，围绕用户行为(Behavior)、场景(Scene) 构建多维表格设计体系。

• 有效性：组件非穷举的，而是基于用户「数据查阅>数据分析>策略建议」最佳实践下的组件设计
• 高密度：表的使用常常多为解决多个场景诉求，展示海量数据明细，因此往往以高密度形态出现
• 低跳转：追求「零」交互设计，分析思路不断层，保障丝滑的看数分析沉浸式体验

图7：表格设计体系

表形态

从表形态来说，S2 目前提供了明细表格、透视表格两种基础表格形态，同时满足明细数据查看和多维交叉分析两种看数诉求。

不仅如此，S2可以支持通过更改简单的配置项，实现透视表平铺模式、树状模式、指标置于行头、指标置于列头、明细表之间的自由切换。

图10：表形态切换

表交互

为了能提升更好的看数体验，S2 内置了丰富的交互能力

图11：Hover 交互

图12：点选交互

图13：圈选交互

图14：布局交互

此外还有诸如 「单元格合并」、「链接跳转」、「列头隐藏」等业务定制交互和 「自定义交互」能力，详情可参考 表格交互。

表分析

字段标记

图形语法在专业数据产品中一般叫「字段标记」，通过不同通道去标记需要用户重点关注的数据，而表格里的数据类型一般就是单点数据，一个格子放置着一个数值。

图15：表和图表的映射关系图

S2 提供的「字段标记」能力，可以为你的数据表格添加文本、图标、条形图、背景色条四种字段标记，让你的数据洞察变得简单直接。

图16：字段标记

分析组件

S2 在内部业务的打磨下，沉淀出一套专业、通用的分析方法论，并将这些分析思路打包为开箱即用的 react 分析组件。如：表头组件、导出组件、维度下钻、行列维度切换、高级排序等，让表分析玩出更多花样。（更多示例请参考 表格组件）

表主题

在实际的业务场景中少不了很多主题定制的需求。S2 内置了默认、多彩蓝、简约灰色三套默认主题包供选择。

用户也可以通过自定义色板或自定义主题 schema 的方式快速注册自定义主题包。更多请参考 表格主题。

S2 的性能表现

S2 选择了 Canvas 作为渲染载体，在保证了交互丰富度、跨平台兼容性的同时，很好地提供了大数据看数场景下的性能基础。同时通过按需渲染、虚拟滚动等方式，保证了在百万级数据量下秒级渲染和滚动不卡顿的流畅体验。极限测试下 100w 的数据也能正常渲染。

更多性能解密请参考 性能介绍。

S2 业务应用

在蚂蚁集团、阿里集团，多维表格是目前商业 BI 分析领域中使用频率最高的图表之一。它们提供单个、两个或者多个变量之间的相互关系的基本画面，可以帮助业务进行交叉探索分析。

根据分析目的不同大致有以下几种常见场景的表格：

• 趋势表：用于查看核心指标随时间变化的进度数据监控和分析，如对团队KPI的进展监控。
• 占比表：用于对比不同对象在相同维度下的比较，如分析人群在不同年龄和岗位属性下的规模占比分布，寻找人群规模大或小的影响因子和具体原因。
• 对比表：用于对比不同用户群或活动等对象在相同维度下的对比分析的场景，如不同年龄同岗位下的人群对比；不同平台同品类下的商品比价。

图25: 场景表分类

到真实的业务中，如何不受限制地满足业务多样的看数诉求呢？S2 内置的自定义 Hook，为开发者提供了足够的发挥空间，可以随性所欲定制各种业务场景表。更多请参考 场景案例。

图26: 蚂蚁内部业务表格场景

发布内容

官网：https://s2.antv.vision/
欢迎关注我们的 S2 GitHub 项目，点亮 star 了解我们的实时动态.