我们在可视化中遇到过的糟糕案例

  一款好的可视化作品，最核心的是要让用户看的懂。AntV 的四条核心原则是：准备、清晰、有效、美。这四条原则也是评估可视化作品的四点准则。

  准确：从数据转化到可视表达时不歪曲，不误导，不遗漏，忠实反映数据里包含的信息。

  有效：信息传达有重点，克制不冗余，避免信息过载，用最适量的数据-油墨比（Data-ink Ratio）表达对用户最有用的信息

  清晰：表现方式清楚易读，具条理性，能够在一定程度上帮助用户快速达成目标，在最少的时间内获取更多的信息。

  美：对数据的完美表达，合理规划利用视觉元素进行艺术创作，不过度修饰，给用户优雅的体验。

  而在实际的场景中，与这四点相背离的案例层出不穷，我们大家可以称之为可视化中的 Bad Case。下面就让我们大家一起来看一下我们遇到过的 Bad Case，希望我们大家以此为警示，不要在实际业务中出现类似的 Bad Case。

  分类图例用于解释图表中的分类维度信息。依据视觉标记的不同，分类图例可分为颜色图例和形状图例。实际场景中，也可以将颜色图例和形状图例融为一体。

  图例是对图形本身的概括。最核心的目的是缩短用户对照图例看图形的本能路径，提升信息获取效率。

  但在实际业务中，我们正真看到了下面这张图，图例完全盖过了图表的风头，这是要给用户看图例还是看图表？

  柱状图用于描述分类数据之间的对比，如果我们把时间周期，如周、月、年，也理解为一种分类数据 (time category)，那么柱状图也能够适用于描述时间周期之间的数值比较。

  数据与图形的映射：分类数据字段映射到横轴的位置，连续数据字段映射到矩形的高度，分类数据也可设为颜色增强分类的区分度

  适合的数据条数：分类数据不宜过多，不建议超过 20 条，如有多组分类数据，不建议超过 10 组

  分类数据超多，长得不像柱状图：可能第一眼都可能几乎看不出这是一个柱状图，其实这是一个横轴分类变量非常多的柱状图。

  标签重叠、相互遮挡：30+ 分类，且标签重叠和相互遮挡，导致可读性比较差。

  饼图通过扇形区块的面积，弧度和颜色等视觉标记，展现数据的分类和占比情况。它的特点是展现部分与部分之间，以及部分与整体的关系。部分相加之和等于整体的 100%，用整圆表示。

  数据与图形的映射：「维度字段」的计数映射区块颜色和数量；「度量字段」的聚合值映射区块弧长和面积

  适合的数据条数：建议区块数目不超过 9 种，超出的部分可优先考虑合并显示为「其他」

  分类太多，不适合使用饼图的时候却偏偏用了饼图：使用饼图时建议不超过 9 种分类，而下面这个超过 20+ 分类居然还使用饼图，密密麻麻的分类和线条，和饼图的本意完全相背离。

  标签重叠和超出画布：暂且不考虑分类问题，标签重叠和超出画布这种问题也足够算是 Bad Case 了。

  集大成的 Bad Case：这个 Case 我都不知道该如何描述了，绝了……

  折线图又叫趋势图，是用于显示数据在一个连续的时间间隔或者时间跨度上的变化，它的特点是反映事物随时间或有序类别而变化的趋势。

  在实际使用的过程中，折线图出现 Bad Case 的情况相对较少，但也不能完全规避。

  横轴文本标签过于突出：x 轴的文本标签和 y 轴交叉，会应用用户对数据的解读。

  关系图种类划分，无论业界还是学界目前都没有一个统一的定论。根据实际的情况去看，图分析产品针对的分析场景不同，会有不同的分析模式，不同分析模式的交互路径和操作的过程都不一样，但最终呈现给用户的图我们大家都希望都是直观和清晰的。

  配色不合理且相互遮挡：配色不仅丑，标签和元素还相互遮挡、根本看不清是什么。

  海量边相互重叠，由线变成面：下面这个 case，虽然能够看清有几个社区分布，但最大的一个社区里面的边实在是太多了，太多的线都快变成面了，完全看不清楚关系是什么。

  布局效果差，节点边重合太严重：和上面的 Case 有点类似，这样的图看起来太费劲。

  理想与现实差距过大：下图的本意应该是想用二部图来表示某种关系，但这个效果实在有点不堪入目，估计也是达不到原本的意图。

  以上就是我们曾经在可视化业务中遇到过的一些 Bad Case，不过经过 AntV 团队各同学的持续努力，大部分都看不到这些 Case 的身影了，我们在尽最大的努力逐个攻克业务系统中出现的 Bad Case。如果大家又遇到可视化中其他的 Bad Case，欢迎大家留言补充。