SpreadJS V19.2 新特性揭秘:数据图表分面图

0 阅读6分钟

多了一行或几根折线,图表的读法就会整个不一样。想比较四个区域的销售走势,把四条线画进同一张图,颜色一多,读者要先在色块与图例之间来回辨认;拆成四张独立的小图,倒是清爽了,可每张图各画各的比例尺,数值范围不同,摆在一起反而无从比较——东区的高峰在西区图里也许只是个小土包。这是图表上由来已久的一对矛盾:放一起太挤,拆开又没法比。

数据分析里其实早有第三种做法,通常称为小多图(Small Multiples),也叫分面图(Trellis)。它的思路是:把一份数据按某个字段分成若干组,每一组画一张小图,然后把这些小图按行或列整齐排布,共用同一套坐标尺度。图是分开了,用来比较的标尺却只有一把。SpreadJS 的数据图表(DataChart)在 V19.2 引入的分面绑定,正是把这种做法带了进来。

排成一行,还是排成一列

分面的思路建立在"把一张图变成一片图"之上,排布方向由绑定决定。

若按行绑定,字段取到的每个不同取值,都会成为图格里的一行:东区、西区、南区、北区各占一行,垂直排开。适合先看清楚"每个区域内部长什么样"。若按列绑定,取值则各占一列,横向排列,更适合沿某个维度一路看过去——比如一年四个季度,Q1、Q2、Q3、Q4 依次铺成四列,四季的形态在并排中直接对比。行与列也可以同时使用,形成一个行是区域、列是季度的格子阵:每个格子是"某区域在某一季度"的子图。这样一张大图,数据切分得干净,位置关系又始终整齐。

image.png

分面字段还允许嵌套,形成两级甚至更多级的分组。区域之下再按城市细分,年份之下再按季度细分,都只是把字段再向下一层放的问题。分面层级与图内分类维度相互独立——图里画什么,和图按什么切分,是两件事,可以在同一张分面图里各自设定。

每格一图,共用一把尺

分面图对"可比"的坚持,体现在刻度的处理上。默认情况下,整片图只画一套共享的横轴与纵轴,而不是每格各画一套——这正是小多图与传统"拆多张图"的本质区别。所有格子的纵轴范围保持一致,读者无需在格子间换算比例,直接比高低即是比数值。类别轴上,同一列内的格子共用横轴刻度,同一行内的格子共用纵轴刻度,任何一格都不会因为自己的数据范围小而另起一把尺。

当然,有些场景需要每格各自有轴。设置里提供了选项,让每一格都独立画出自己的坐标轴,刻度只依据该格内部的数据计算;遇到某些格子没有数据点的情况,也可以选择让这个格子整体留空,不再画出光秃秃的坐标架。两种偏好都有对应的开关,默认按共用轴、保留空格处理,需要精细控制时再逐项打开。

格子的外观同样可以调整。分面的行、列标题文字及其悬停样式可以单独设置,格与格之间的内边距可以控制疏密,格子之间或格子外圈的分隔线也能按需加粗、改色或改成虚线。这些细节让分面图不只是数据的分组摆放,也能在观感上贴合报表本身的版式与配色。

把哪些内容装进格子

分面图适合的内容,比想象的宽。柱形、条形、折线、面积这些常见图形自不必说,堆积与百分比形态、散点与气泡、漏斗与瀑布、蜡烛图乃至组合图,都可以放进分面结构里。对组合图,各格内的子图类型保持一致——这一格是柱上加线,那一格也是柱上加线,比较的基准才成立。

由于所有格子共享图例与主题,整片分面图看起来是一体的,而不是若干张各自为政的小图拼在一起。鼠标悬停某个数据点时,提示里会带上它所属的分面字段与取值——是哪一区域、哪一季度,一目了然,不会因为图被拆开而丢失归属信息。

image.png

image.png

image.png

用得上的场合

分面图最有价值的地方,是"既要看整体,又要看局部"的场合。连锁门店逐个门店看业绩,制造企业逐条产线看产出,销售团队逐个大区看达成,市场投放逐条渠道看回报——当需要按某个维度一组一组地读,又希望组与组之间能直接比较时,分面往往比单张叠加图更清楚。尤其当某一维度取值很多时,叠加图会因颜色过多而失效,分面却始终把每个取值摆在自己的格子里。

还有一类场景是"同构对照"。预算复盘时各区域版式相同、只是数值不同;绩效看板上各部门同用一套指标。这种结构高度一致的对照,天然适合分面——模板是一致的,读者只需要比数值。分面图的价值正在于此:把重复的版式交给图本身去复制,让人把注意力留给数字的差异。

分面维度选在什么字段上,也有讲究。放进分面的字段,最好是取值不算多、且每组数据都足以撑起一张小图的维度——地区、渠道、产品线这类取值动辄几十个的大基数字段,会让格子总数迅速膨胀,版面随之拥挤,反而不如先按它筛选、再在剩下的维度上分面来得清爽。分面擅长的是把"几个到十几个"的同构分组排得整齐、比得清楚。

留给使用者的判断

也要如实说明它的边界。分面图本身不提供滚动,若分面字段取值很多、格子数量庞大,版面会显得拥挤,这时需要使用者权衡——是缩小单元格,还是减少分面层级,或改按其中一两级来切。图给到了这里,取舍的分寸仍在排布它的手里。

同样要掂量的还有"是否真需要分面"。只有一两个分组、或各组之间本就无可比之处时,一张叠加图往往更直接。分面把"一眼比高低"摆在第一位,代价是单格里的细节让位于整体的排布;该不该拆开,取决于读者主要读什么——逐组细读细节,还是一览组间差异。

把一张拥挤的大图,换成一片井井有条的小图,读图体验的改善常常立竿见影。数据被拆开了,刻度却始终一致,这是分面图讨巧的地方:它既给了每组数据独立的空间,又守住了整体比较的尺度。