条形图和圆环图数据占比映射的比较研究

李茂宁，玄颖双

（1.广州大学，广州 510006；2.广州番禺职业技术学院，广州 511483）

数据可视化用图形来映射数据，揭示事物之间的内在关系，广泛应用于信息呈现和界面设计。数据可视化常使用条形图和圆环图来中介数据的比值关系，应用于终端界面的设计。先前的大量研究基于静态环境，在动态、交互环境下，2 种形态的图形映射效率并未明确。为了探明在时空受限的条件下两者的映射优势，研究设计了条形图和圆环图比值判断实验，用E-prime 来收集数据，使用SPSS 进行数据的统计，分析和比较2 种形态映射的差异，探索的结论将有助应用于动态交互场景，或有助于数据可视化设计时减少因数据堆集而导致的信息过载。

1 数据可视化机制和图形感知

映射是一个从数理理论借用而来的术语，表示两组事物要素之间的关系[1]。唐纳德·A·诺曼认为设计中的映射应该符合人的自然认知和直接经验，反馈具有快速准确的特点，这样形成的一个交互过程才具有良好的体验，他的观点在界面设计和交互体验中起到了重要的作用。数据可视化即是利用图形的形状、色相、亮度、纹理或多个特征联合的差异来表示抽象的数据。

数据可视化基于图形感知的研究多集中在形状方面，其中诸多方形与圆形的感知规律对数据可视化有直接的指导意义。圆形具有示能、意指作用[2-3]，圆环具有较小的面积，在圆形界面中具有组织视觉秩序的优势。抛开视觉审美的因素，不同形态的图形在映射数据时，效率有较大的差异。先前的研究表明被测试对象在比较不同图形映射数据一致性时，圆环和实心圆的正确率最高（正确率64.5%），比实心圆和正方形（正确率43.5%）或实心圆和三角形（正确率38.5%）明显更好[4]，换句话说，在数据可视化呈现时，实心圆、三角形和正方形之间映射的准确性有较大差异，圆环和实心圆的差异不大。

虽然圆环和实心圆在映射数据时差异不大，但是圆环图能更好地呈现多维群集数据。Arcs 等人测试了实心圆和圆环视觉编码，认为圆环和实心圆主要依赖于弧长和面积编码，在判断占比时圆环和实心圆具有同等的优势。[5]圆环图可视化利用多个同心圆环的组合，用色彩特征映射数据，可用于反映水文地质和环境的规律[6]；环形图可用于识别多种疾病诊断率的时空趋势，分析疾病与性别、种族和社会因素的关联[7]，以及用于多元流行病学数据的空间可视化[8]。在使用环形图映射的众多案例中，数据大多呈现集群和多维度特征，由于圆环比圆形占有更少的面积和更易于组合，而且圆环的这一特征更容易阐释数据间的抽象关系。

基于形状差异映射的研究还表明，条形图和圆环图在数据映射的效率上各有优劣。Heer 等[9]的实验表明，比较正方形的大小不如比较具有不同长宽比的矩形准确。Hollands 等[10]发现，随着条形图中组件数量的增加，它们在传达比例上的有效性也会降低。Frederick 在研究个体与总体比例关系的映射时，发现在50%、25%百分比时，圆形图的判断比条形图准确，在12%、33%百分比时条形图的判断比圆形图准确；在40%百分比时，圆形图的判断与条形图的判断没有显著差异[11]，造成这种差异与被分割的图形特征有关，与前注意加工（Preattentive）[12]有关。Frederick E.C 后续研究中关于个体间关系的映射时，发现基于条形图的估计比基于正方形，圆形或立方体的估计更加准确[13]。有些研究认为条形图的修饰会严重影响图表内数据的传递程度[14]，但还有些研究认为在认知负荷较低，认知适应后，可视化图形中的标签可以提高信息提取的速度和准确性[15]。条形图利用AR 技术，可在室外环境中以沉浸式传递地理空间的数据[16]，条形图也可以通过转换而生成其他原型图[17]。

虽然上述的研究侧重和上下文不尽相同，但都是基于静态环境，对比较的时间也并没有明确的限定。在某些特定的条件下，数据反馈的速度比数据反馈的精度更重要，例如行驶中汽车的仪表盘，或者大量群集的数据阵列，需要对映射的比值做快速的判断，同时与动态环境做交互处理。在控制时间的条件下，条形图和圆环图映射的差异性可能会加剧。先前的数据可视化研究主要关注静态环境下的数据映射的准确性，而排除了时间和空间的限制。而在某些动态场景中数据可视化的观察受到时间、终端物理界面、或数据量群集等因素的限制，速度非常重要，而数据映射的精度则相对次要。

具体到时空环境中，Blascheck 等[18]做了条形图、圆环图和径向条形图在智能手表中数据比较的实证研究，结果表明，在需要快速比较数据的情况下，条形图和圆环图比径向条形图更具有优势。先前研究的成果对数据可视化的比较关系设计具有重要的指导意义，但是目前没有明确的研究证明，在控制时间的条件下数据占总体比值关系时，条形图与圆环图的差异和优势。

比较此情境下的条形图与圆环图映射的效率和优势，探索其判断感知的依据，是对界面设计的有益补充，或有助于减少因数据堆集而产生的信息过载。为了探索这一问题，研究设计了映射判断实验，比较二者的判断速度和准确性。

2 实验设计

研究的目标是探索在速度优先，精度次之的场景下，条形图与圆环图的映射效率。因此研究假设在此条件下，条形图的映射比圆环图更为快速而准确。为了验证这一假设，本文使用数字化行为实验的方法收集数据，通过比较反应时间来判断速度，通过比较错误的频率来判断准确性，结合两者数据来分析映射的效率。

2.1 刺激物

实验的刺激物是条形图和圆环图。为了得到相对客观的数据，规避可能的其他干扰因素，对条形图和圆环图的基本形态做了一些考虑和限定。构成条形图的线可能存在多种方向，由于线的倾斜会产生方向错误感，而感知速度会随着线的角度而变化[19]，所以实验设计的条形图使用常用的水平状直线，映射的取值也按照由左到右的阅读习惯，以灰度差异来判断数值，从而规避因阅读方向会导致空间偏差[20]。

圆环图不封闭，开口在右下角，构成圆环图的线占整个圆环的75%。阅读的方向由上至下。由于感知判断基于圆环图的线的面积和条形图线的面积一致性，2 根线的2 个端点间的粗细没有变化，但是面积相同的2 根线的粗细有差异。2 根线都不含任何装饰和刻度。

2.2 参与者

实验被测对象来自广州的高校，一共51 名。他们的年龄在18～24 岁之间，平均年龄是20.3 岁（SD为175 cm），其中男性27 人，女性24 人，裸眼视力或矫正视力正常，无色盲色弱，全部是右利手。

2.3 实验装置

映射判断的实验用计算机化实验生成系统E-prime 2.0 编制。条形图和圆环图随机出现在屏幕中央，被测对象通过按键反应来判断映射的数值，计算机记录反应的时间和判断的数值，从而获得映射判断的速度和判断的错误率。刺激呈现在68.5 cm 彩色Led 显示器上（屏幕分辨率是1920 PX ×1200 PX）。条形图线长度有3 个取值，分别是143PX、287PX（20视角）和430PX，圆环图的半径取值分别是23PX、61PX 和68PX。由于实验对判断时间的限制，并未强调映射取值的精度，条形图和圆环图的映射取值分别设置为占总体的1、1/2 和1/3。

2.4 实验程序

为了控制时间条件，被测对象被告知如果超过2秒没有反应被视为错误判断，在确保判断正确的前提下，快速按键反应。正式实验前需要进行练习，如果正确率高于95%且平均反应时低于1 000 ms 才可以正式开始实验。单次实验流程见图1。

图1 单次实验流程Fig.1 Single experiment flow

实验开始时首先会在屏幕中央呈现一个十字形的灰色注视点，实验过程中空屏间隔的屏幕中央都有注视点。实验过程中，被测对象手指放在“1”“2”“3”键位置，使用这些键映射数值并快速按键判断，记录正确率与反应时。被测对象按键反应后画面随即消失，判断任务结束（如被测对象2s 内未作出反应，视为一次错误反应），随机间隔500 ms～800 ms 后再次开始。单次画面判断完成后，刺激消失，屏幕中央出现提示，继续进入下一画面。

正式实验包括36 次测试，每18 次测试完毕被测对象休息片刻，之后按确认键继续操作。

3 实验结果

在这个实验中共采集到1 836 条数据。采集到的反应时数据做了筛选处理，将被测对象的反应时数据以Z值区间（–2.0,+2.0）为标准去除离群值，保留了1776 条数据。采集的数据使用SPSS 25 软件进行统计分析。

球形度检验P=0.000<0.05，不符合球形性，采用多变量检验结果，见表1。多变量检验2 种形状的映射（Form）F=218.385，P=0.000<0.05，表明2 种形状的映射判断有差异，见表2。

表1 莫奇来球形度检验Tab.1 W sphericity test

表2 多变量检验Tab.2 Multivariate test

成对比较数据表明，在3 种大小取值和3 种映射取值下，条形图的映射判断速度与圆环状的映射判断速度均有显著差异（P<0.05），见表3。

表3 成对比较Tab.3 Pairwise comparison

续表3

反应时间平均值见图2，条形图在映射取值为1时，平均值为573 ms；在映射取值为1/2 时，平均值为657 ms；在映射取值为1/3 时，平均值为744 ms；圆环图在映射取值为1 时，平均值为614 ms；在映射取值为1/2 时，平均值为689 ms；在映射取值为1/3时，平均值为 752 ms；横线状映射判断平均值为658 ms，圆环状映射判断平均值为685 ms。条形图的3 个尺寸的均值在不同映射取值时的反应时均低于圆环图的反应时。

图2 反应时间平均值Fig.2 Average reaction time

条形图和圆环图映射判断错误数据见表4，圆环图映射判断错误率是4.03%，条形图的映射判断错误率是2.51%。数据表明相同条件下，条形图在判断映射数值时更准确。

表4 映射判断错误率Tab.4 Mapping judgment error rate

4 分析与讨论

实验结果表明，条形图的映射判断无论是速度还是准确性都比圆环图要高，综合这2 个方面，条形图在此条件下具有更高的效率和优势。

条形图和圆环图都具有简洁的知觉特征，掌握二者的映射效率，不仅有助于速度优先的场景下提高交互的效率，而且在呈现大量的数据时，有助于提升界面视觉组织的秩序，减少信息加工负荷。过滤器模型和注意衰减模型表明大脑处理信息的能力有限，为了避免信息过载，大脑选择部分信息进入高级分析阶段，虽然人们有选择性注意的能力，但是由于认知的中枢瓶颈（bottleneck）效应而导致数据判断的失误。所以，在这种场景下映射判断的速度比映射取值的精度更重要，当注意力在多个注视点间转换时，某一焦点的信息过载会增加认知的负荷，从而导致专注于另一注视点注意力下降。因此从知觉的维度来看，数据可视化时，映射的速度越快，对其他场景的影响越小。

两者比较判断，在映射取值为1 时，条形图和圆环图的反应时差距最大；在映射取值为1/2 时次之；在映射取值为1/3 时差距最小。从目前仅有的3 个映射取值来看，映射取值与两者反应时差距是一种正相关关系。但是Frederick E.C 在比较圆形图和条形图的占比关系时，发现判断的准确性受到映射取值的影响，而这种影响是离散型的，比如取值为1/2、1/4时，圆形图的判断比条形图准确，取值为3/25、1/3时，条形图的判断比圆形图准确。由于实验设计时未将映射取值的精度作为第一条件，映射取值只设置了3 个最简单的值，其结果表明了差距连续减少的趋势，如果增加映射取值的精度，是否仍然保持此趋势有待进一步的验证。

条形图的3 个尺寸的均值在映射1，1/2，1/3 时的反应时均低于圆环图的反应时，并在映射取值趋于精细时这种差距逐渐减少，无论是条形图还是圆环图，判断所需要的时间都随着取值的精细化而越来越长，两者之间的反应时间差距趋向于0。这也符合人们的主观猜测，同时也说明在速度优先，精度次之的场景下，两者的比较才有现实意义。

实验中设定的条形图是水平状的，虽然重力不会影响视线平分任务[21]，但是重力对垂直状的条形图的映射判断是否产生叠加效应并未明确。

实验中设定的圆环图不封闭，开口在右下角，构成圆环图的线占整个圆环的75%。实验中的映射判断基于刺激中黑色部分和灰色部分亮度上的差异，由于一阶特征的图形会产生前注意效应[12]，为了消除影响，条形图和圆环图需要保持一致的面积。所以实验设计圆环图的线占整个圆环的75%，并缩小了圆环的半径，以保持一致的面积。Frederick 发现在判断圆形图占比关系时，部分判断来自扇形的面积，部分判断来自扇形的角度。虽然在视觉搜索任务中，闭合形状的搜索比开放形状的搜索更快[22]，但是由于圆环不能形成实质的角度分割，判断的依据还是面积的特征，所以条形图更具有竞争优势。

由于实验被测对象的数量相对较少，虽然在实验过程中严格遵循实验的程序和方法，并严格控制被测对象的视角和实验状态，但实验结果仍然会具有一定程度的泛化，要获得更为客观的数据，最好的解决方法还是增加被测对象的数量。

5 结语

上述实验数据反映了条形图和圆环图在3 种尺寸下和3 种取值下的判断时间均值和2 种图形判断的错误率，无论是何种尺寸，条形图的映射判断速度始终比圆环图的要快。判断的错误率数据也表明，条形图的映射判断比圆环图映射判断更加准确，更不容易出错。实验证明了人们的假设，在时间优先，精度次之的场景下，条形图的映射比圆环图的更为快速而准确，条形图在占比的映射判断中，具有更好的优势。

综上所述，在占比的数据映射中，条形图的映射判断速度和准确性比圆环图更具有优势，更适合应用于时空受限制的场景，有助于数据可视化设计时减少因数据堆集而导致的信息过载。