SpreadJS V19.2新特性揭秘:进度条迷你图

1 阅读7分钟

进度信息是表格里最常见的信号之一:任务完成了多少、库存水位到了哪里、季度配额达成了几成、项目距交付还差多远。这类信息几乎天天出现在工作报表里。但"进度"这个词本身就带着两层含义——数字代表完成的比例,图形让这个比例一眼可读。在过去,这两层常常被拆开:数字留在单元格里,图形则要交给单元格之外的图表。

图表是表达进度的好方式,也有它天然的距离。仪表盘、环形图把完成度画得很清楚,但图表通常是一块独立的对象,占据单元格之外的画布,位置要摆、尺寸要调、数据区域要指定。数据一变,图表和数据的对应关系需要维护;报表要交付给不同的人,图表的格式也要保持一致。为了一列进度数字,专门安置一排图表,成本并不低。于是很多人在报表里选择退而求其次:只用百分比数字,图形信息靠读者自己脑补。

单元格里也不是完全没有表达进度的手段。条件格式里的数据条,可以给单元格填充出一段随数值变化的条形。它把进度画在了单元格里,但表达相对有限——数据条依赖条件格式规则,规则要逐个区域维护,进度条本身也没有环状、弧状这样的形态,百分比文字是否显示同样不由使用者控制。数据条解决了一部分需求,在形态与可控性上留有余地。进度迷你图正是在这片余地里,补上了更完整的选项。

一个公式,一格画布

SpreadJS 新版本提供的进度迷你图函数 PROGRESSSPARKLINE,走的是一条更贴近数据本身的路。它把进度图形直接画在单元格里,而支撑它的,是一个普通的公式。函数的参数描述了这个进度:比例值、显示样式、颜色、是否显示百分比文字。公式所在的那个单元格,就地变成了进度条的画布。进度是 37% 就是 37%,数字与图形同处一格,互不分离。写起来同样是一个普通公式,参数按顺序描述了进度:

=PROGRESSSPARKLINE(0.37, 1)     // 37% 的完成度,横条样式
=PROGRESSSPARKLINE(B2, 14)      // 引用单元格 B2 中的比例值,环形样式

呈现样式上,这个函数给出了相当丰富的选择。既有沿水平方向延伸的条状样式——连续填充的横条、带斜纹的条纹、离散分段的块状、带勾选方格的步骤样式、末端以圆点收尾的样式,不一而足;也有环状样式——整圆进度环、留出缺口的环、粗环、带刻度或圆点的环;还有半圆的弧状表盘样式。一条、一环、一弧,各有各的适用语境。报表想要克制的横条,看板想要醒目的环形,步骤型进度想要一格一格地表示,函数本身不替使用者做决定,样式交给参数去选。

Image

颜色的处理同样灵活。已完成部分与未完成轨道可以分别指定颜色,配合使用者的视觉设计。颜色既可以直接给具体的色值,也可以用主题色——使用主题色时,进度图的配色会随工作簿主题一同变化,整套报表换主题时,单元格里的进度条也跟着保持一致。百分比文字是否显示,也可以开关。一格之内,图形与数字的取舍由使用者掌握。

公式驱动,随数据而变

进度迷你图还有一层特性:它是公式驱动、随数据联动的。单元格里的进度依据的是某个比例值,这个值可以是一个数字,也可以引用另一个单元格。引用的单元格变化,进度条随即重绘。数据更新,图形自动跟进,不需要任何手动刷新。对看板类报表,这个特性意味着"数据变了,图形就变",两者永远同源,不会出现数字与图形对不上的尴尬。

公式的使用还带来一层批量上的便利。进度列可以像普通公式列一样填充:一行是模板,向下复制,整列任务都有了各自的进度条。表格里新增一行任务,公式随行展开,进度图自动跟上,不需要为每个单元格单独绘制、单独维护。看板、清单这类行数常常变化的报表,维护成本因此被压得很低。

Image

约定与门槛

比例的约定也处理得规整。进度值按 0 到 1 的比例理解,0.75 即 75%。空值显示为 0,小于 0 的值按 0 显示,大于 1 的值按 1 显示,越界的输入不会把图形撑破,图形永远停留在合理区间内。参数无效时返回错误提示,问题能够被及时发现。这套边界行为,让进度图在数据不规整时依然表现得体面。数据源里的值参差不齐,是报表里常有的事,有了这层兜底,进度列不至于因为个别异常值而显示错乱。

从使用者的角度看,这套能力的学习成本也不高。它不需要新建对象、不需要配置图表数据区域,写下一个函数、填好参数,进度就画出来了。参数的含义直白,样式、颜色、是否显示文字各管一项。比起搭建一块图表对象,这个入口轻得多,也更贴近表格使用者已有的习惯——在表格里处理事情,用公式说话。

进度走进报表

放到实际工作中,进度迷你图的应用面相当广。

任务与项目清单是第一个。一张待办清单、项目排期表,每一行是一件事,每一行后面跟一个小进度条,完成度一目了然。十几行、几十行任务铺开,每个任务的进度不用逐一读数字,扫一眼图形就有个整体印象。比起给每一行配一张图,单元格里的迷你进度条在空间和阅读上都轻盈得多。

配额与目标达成是第二个。销售配额、业绩目标、产能达成,这类数据天然适合进度表达。一行行目标数字配上一列进度条,达标与未达标的差距一眼可辨,团队整体进度也能快速把握。管理人员浏览报表时,图形先给出信号,数字再补充细节,信息获取的节奏顺畅自然。

库存与资源水位是第三个。库存水位、空间占用、资源使用率,本质都是"用掉多少、还剩多少"的比例问题。进度条把这类状态变成直观的填充程度,接近满格的条提醒补货,低位徘徊的条提示余量充足。状态监控类报表里,这种表达比单纯数字更符合人的直觉。

报表交付的场景同样受益。进度迷你图是绘制在单元格里的,跟随单元格一同排版、一同导出,天然融入报表本身,不占额外画布,也不会因为图表对象的摆放而打乱版式。交付出去的报表自带进度视图,读者不用在数字和图形之间来回对照。

进度数字与进度图形之间,过去隔着一层"另建图表"的工作。把图形交给公式,把画布交给单元格,这层隔阂就消失了。数据、公式、图形三者在同一格里同源同命,更新一致,位置固定,视觉统一。从数字到理解的距离,因此短了一截。报表里多的是"看一眼就想知道的进度",这一眼,如今在单元格里就能完成。进度这件事,或许本就该待在它发生的地方——就在数据旁边,就在单元格里。