关于前端:AntvS2-基于Canvas的高性能多维分析表格

88次阅读

共计 2240 个字符,预计需要花费 6 分钟才能阅读完成。

导读

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


图 1:结绳记事

从记录一维数据的统计表格到两维(两个变量)、直至多维(多个变量)的表格,逐步承载着用户多维世界的思考,它们提供了多个变量之间互相关系的根本画面,帮忙人们发现大数据之间的相互作用,进而进行深刻的穿插摸索剖析,于是有了目前商业 BI 剖析畛域中应用频率最高的图表之一「多维穿插剖析表格」。


图 2:表格维度空间映射

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

图 3:KPI 趋势表 -Powered by S2

S2 是什么

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

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

图 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 理解咱们的实时动静.

正文完
 0