导读
表,是日常生活工作中被广泛使用的图表之一,说到它的起源大概要从结绳记事,易货交易说起。那时为了交易计算方便,人们就开始拿根小木棍在地上画画写写,渐渐地开始有了最雏形的统计表格。
文章图片
图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: 蚂蚁内部业务表格场景
发布内容 【Antv/S2|Antv/S2 基于Canvas的高性能多维分析表格】官网:https://s2.antv.vision/
欢迎关注我们的 S2 GitHub 项目,点亮 star 了解我们的实时动态.