查看原文
其他

字节数据可视化 VTable——不止是高性能表格组件

刘方方 DataFunSummit
2024-09-10
导读 VTable 是字节跳动推出的 VisActor 可视化解决方案中的一个高性能表格组件,但其提供的功能和价值还不止于此。本文将为您展示 VTable 的优势,并介绍其背后的原理。主要内容包括以下几大部分:

1. VTable 功能介绍

2. VTable 功能展示

3. VTable 架构原理

4. VTable 后续规划

5. 关注 VTable

6. 问答环节

分享嘉宾|刘方方 字节跳动 研发工程师 

编辑整理|琛琛

内容校对|李瑶

出品社区|DataFun


01
VTable 功能介绍

VTable 是字节跳动推出的 VisActor 可视化解决方案中的一个表格组件,其标语为“不只是高性能的多维数据分析表格,更是行列间创作的方格艺术家”。标语中包含三个关键点,一是高性能,二是多维数据分析,三是方格艺术家。本节后续也会就这三个关键点进行说明。

1. 表格的构成

首先来介绍一下表格的构成。

大家在日常工作中会接触到各式各样的表格,这里以 VTable 当中的透视表为例,来看一下表格的基本结构。

第一部分是表头,分为列表头、行表头以及角表头。最主要的部分是 body,即数据单元格。主题和结构的划分紧密相连,如果设置一些样式的话,在 Theme 里面都有专属的设置入口。还可以分别设置单元格的样式、边框以及整体的 frame 的样式。

2. VTable 支持的表格形态

VTable 支持的表格形态中,最常用的就是基本表格。在基础数据展示以及数据表信息查询等业务场景中经常用到。基本表格进一步形变,做一个转置,可以把表头放在行上。再进一步形变,可以支持树形结构,以层级关系的形式展示数据。

第二种表格形态是透视表,一些专业的数据分析师,从多个角度进行探索分析时经常会使用这种表格。透视表也可以以树形结构来展示。还支持多列树形展示,可以观察多个维度的聚合值。

第三种表格形态是透视图,将原来每个单元格式展示的数据值,替换成 VChart 图表。它能够直观地展示不同的维度值下的对比。这种表格同样适用于数据分析,与透视表的区别在于,这里多了轴以及图例等组件。同时还可以解决多图表的性能问题以及布局问题。

3. 交互

再来看一下 VTable 的一些交互效果。上图中罗列的是部分常用的交互效果,包括单选、多选、十字或整行整列的高亮效果、右键菜单、拖拽调整列宽、双击自动适应内容列宽、移动表头的位置还有滚动的交互效果。

编辑能力,目前内置日历日期型、文本和下拉列表型,如果不能满足业务场景,还可以自定义扩展编辑器。提供了复选框、迷你图的高亮效果。并且在集成了 VChart 之后,单元格上的交互在图表中仍可使用。

4. VTable 亮点

在文章开头提到的 VTable 标语中的三个关键点,正是 VTable 的三大亮点:性能极致,多维分析,表现力强。接下来分别介绍这三大亮点。

(1)性能极致

支持百万数据快速运算与渲染。

极致性能可以从以下两点体现出来:
  • 一是首屏渲染时间短,千条数据能够在 20 毫秒内完成渲染,一百万数据在 70 毫秒内就能够首屏显示出来。
  • 二是滚动拖拽等交互流畅,能够达到 30 帧率,这是一般视频的流畅度。
(2)多维分析

多维分析方面,第一个亮点功能是自动组织维度树。

多维分析透视表,行表头和列表头维度的层级结构,是通过遍历数据源得到的。单元格的值,是用源数据的 value 做聚合得到的。

再具体看一下自动组织维度树的过程,数据源拿到的是一个明细数据,以刚才的透视表为例,行的第一层是地区,第二层是省份,列表头的第一层是年份,第二层是季度,需要去聚合销售额和销售数量,这样就组织形成两棵树。

聚合指标数据指标有两个,一个是销售额,一个是销售数量。表中的每条数据可能是由多条数据聚合而成的,在聚合过程中会创建另外一棵树结构,是维护和单元格对应关系的一个树结构,最终的结点 node 是一个聚合逻辑的对象。除了求和的聚合,还支持求平均、最大、最小。并且支持过滤和排序。

(3)表现力强

第三个关键点是表现力强。由于底层基于 canvas,所以集成图表是比较有优势的,性能方面也比较好。单元格里支持文本、超链接、图片和视频,还支持一些小的迷你图表,以及层级关系数据和一些操作按钮图标。除此以外,还支持用自定义渲染的方式去实现单元格内容的排版布局。同时,还支持在样式图样式上设置字体形状或者是尺寸色彩。

02

VTable 功能展示

登录 VisActor 官网,在首页可以看到全部产品,包括 VChart 图表库、VTable 表格库、VGrammar 语法库、VRender 可视化渲染引擎、VGraph 关系图以及 VGis 地理场景库。

进入 VTable,首先是表格示例,收录了用户常用的表格场景示例和常用配置的示例。配置文档是按表格形态划分的,ListTable 是基本表格,用于展示明细数据。PivotTable 可以配置组织行列树。PivotChart 和 PivotTable 类似,只是需要指定以图表展示。其中,教程文档、Demo 等都是随着能力的增加在不断补充的。

点击下面的文字可以来看一些具体示例。

https://mp.weixin.qq.com/s/Vpze6EPm5mrQgvUaACCBFA

https://mp.weixin.qq.com/s/vI9FTcxEJAmE941rDUXZIw

03

VTable 架构原理

接下来介绍 VTable 的架构和基本原理。

整体框架基于 VRender 渲染引擎实现。在此基础上,封装了一个场景树,也就是表格每一个节点会对应一个 text 值或者是 react 的矩形框等。如这样一个场景树:上层是一些布局模块、状态管理模块和事件管理模块。再往上是针对于用户层的 option 配置、数据分析部分和主题样式部分。

下面简单介绍几个技术实现的原理。

1. 虚拟滚动

表格的滚动的背后有一个虚拟滚动的过程,因为场景树并不是完整的,也就是 100 万行数据背后,并不会有 100 万行的所有节点,可能维护了几百个,然后在滚动的过程中进行场景树的替换更新。例如向下滚动,那么滚动上去的一整行单元格即作废,位置移动到下面,内容更新成新的一行的文本信息。这就是虚拟滚动、节点移动的过程。

2. 布局缓存

布局缓存主要是针对行列表头。有一些表格需要合并,合并的依据主要来自于布局缓存,在做表头分析的过程中产生了一个树,树的父节点一般都是需要做一个合并的逻辑,这个用 ID 去做区分,同时这个 ID 也是索引一些属性配置的 Key 值。

3. 图表集成

第三个介绍的点是 VChart 图表集成,这里直接利用了表格的布局。在业务方自己实现这种布局的框架中,拖拽列宽自动更改布局,拉大整个图表,这种能力是比较难实现的。利用了 VTable 表格布局之后,这种能力就天然支持了。

在性能方面用到了 VChart 实例共享这一技术点,另外图片缓存也是一个性能优化点。此外,我们还做了 VChart 实例的事件代理。所以,虽然集成在 VTable 里面,但 VChart 的能力都得到了保留。

04

VTable 后续规划

VTable 整体的规划如上图所示。在基础能力方面,将继续以用户需求为导向,不断完善基础功能,如布局、交互、分析、编辑,以及一些扩展组件等。期望能够覆盖绝大部分的功能需求。性能方面,在首屏和一些特定交互场景中继续优化。

特色能力方面,主要是可视化能力。因为 canvas 本身具有可视化的优势,后续会有单元格可视化编码、甘特图、趋势表等特色表格提供给大家。数据分析能力上,会实现一些 Excel 的常用功能。另外,后期还会增加一些动画效果来提升用户体验,在交互中增加更多的生动感。比如排序、拖拽和收起展开等交互点都可以做一些动画效果。

05

关注 VTable

如果希望进一步了解 VTable,可以浏览项目官网、github 或关注微信公众号,获得更多信息。

06

问答环节

Q1:页面渲染是否会实现 for Calendar 的功能?

A1:我们后续会推出日历型表格,作为特设图表之一。

Q2:是否支持自动换行?

A2:自动换行是支持的,能够根据当前的列宽将文本自动换行,并且可以根据行高自动撑开。

Q3:二次计算的结果可以正常地参与排序和过滤吗?

A3:这是我们后续会增强的一项能力,目前在开发中。
以上就是本次分享的内容,谢谢大家。


分享嘉宾

INTRODUCTION


刘方方

字节跳动

研发工程师

10 年工作经历,主要从事 canvas 渲染工具的开发,目前在字节跳动可视化团队研发 VTable 表格组件。

往期推荐


兼顾降本增效,StarRocks 3.0 关于存算这对CP分离的最佳"姿势"

爱奇艺大数据平台的技术演进与功能实践

B站数据服务中台的建设实践

因果推断在蚂蚁风控场景中的应用

大语言模型在开放世界中的推理能力探索实践

字节在电商领域的数据治理体系和实践

大数据分析平台之 OLAP 架构的最佳实践

数据分析及指标中台核心能力建设实践

腾讯TRS之元学习与跨域推荐的工业实战

大模型的高效训练和部署技术卷出新高度!

360跨模态视频开放式标签挖掘技术实践分享

当因果推断遇上了医学研究

第三代指标平台:真正实现“管、研、用”一体化

企业如何构建指标平台并实现智能分析?

业务理解和逻辑推理是金融大模型运转的动力

点个在看你最好看


继续滑动看下一个
DataFunSummit
向上滑动看下一个

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存