超多案例！教科书级的数据可视化系列基础指南

数据可视化的核心在于点、线、面的艺术组合。本文将深入解析三大构成要素在图表设计中的关键作用，从散点图的分布规律到柱状图的斐波那契宽度设计，揭秘几何形态如何影响数据传达效率与视觉美感。

在讲数据可视化的几何图形设计前，我们先来聊聊设计基本功——三大构成中平面构成的点、线、面。我们人眼所看到的万事万物都能抽象成点、线、面，这三个基本要素。点是所有图形的基础，是一切设计的起点。线是由多个点彼此相邻连接而成，是对客观物形展现的高度概括，两个点的位置即可构成一条线。面是由线扩展而成，也可以是由一条线封闭组成。面相比点、线具有更重的体量，它占据了内容的主体，控制着整个画面的视觉调性。

一、点线面的几何形态特征

接下来从形态学和几何学角度详细分析点、线、面所包含的艺术语言。

1. 点

点是一个相对的概念，不同形态的点呈现出不同的视觉特效。一般我们描述“点”是指，从人眼视觉上来说面积非常小的图形。随着点的面积在一定的画面空间中逐渐增大，点的感觉也会相对减弱。

点的形态因素包括大小、形状、色彩和肌理。点的大小并非固定，而是和其所处空间的对比关系形成所谓的“点”。在自然界中，点可以是宇宙中的一颗星球，也可以是你目及之处的一个汉字。点只要优先满足它的大小特征，任何形状的图案都能称之为点。色彩和肌理也是同理，它们只是作为传达点视觉特征的填充手段。

点的几何因素有面积、位置、数量和方向等。点的面积从两个角度理解，一种是和几何空间的对比关系，另一种是和其他点之间的大小比例关系。点的位置是点在平面空间中距离原点的绝对位置，也是距离其他点的相对位置。点的方向要在一定数量基础上才能体现，多个点的变化或运动，形成各种形态的线、体。多个点产生的关系，形成空间、距离和比例。

2. 线

线可以理解为是点的运动轨迹，强调方向和外形。它的形态因素有宽度、形状、色彩和肌理等。不同粗细宽度的线条传达出不同的形态特征，细线轻盈、精致，粗线沉着、大气。线条的形状主要有直线和曲线，直线简洁、明确，曲线优美、变化。线条的色彩和肌理也是丰富多样，渐变、半透明、阴影等都是艺术表现的手段。

线的几何因素主要是位置、长度、方向。点在平面空间沿固定方向运动构成了直线。因一定条件而变动方向地运动构成了曲线。两个点的位置和距离决定直线的位置、长度和方向，斜向上的的直线给人上升趋势的感觉，斜向下的直线则给人下降趋势的感觉。多个点的位置和距离，产生了含一定方向的折线或曲线，多个点汇聚，则形成封闭的图形。

3. 面

面即是形，可以由以下几种方式构成：点扩大、线封闭、点/线密集排列。面的形态因素和点、线差不多，其形状主要有四大类型，几何形、有机形、偶然形（偶然形成的形态，如滴落的水迹）、不规则形。面的形状特征还包括带棱角和不带棱角，带棱角的面具有硬朗、尖锐的印象，不带棱角的面则具有圆滑、饱满的特征。虚实是面的另一个重要形态因素，可以通过渐变、半透明或肌理来表现。

面的几何因素主要在于大小、位置。几何形面惯用面积来表示面的大小，面积越大表示面在空间中的体量更大。位置是面在空间中的相对位置，能够影响整体平面空间的平衡感。

二、数据可视化的几何图形分类

从点、线、面三种形态的图形划分，可以将常见的数据可视化图形分为以下几类：

1. 点图：指单体图形在轴空间的占比小，能够以点来计算，包括散点图和气泡图
2. 线图：用线的运动方向表达数据趋势的图形，以折线图为主，还包括雷达图、阶梯图、路径图等
3. 面图：顾名思义是几何图形在轴空间具有一定体量的图形，如柱状图、面积图、饼图等。几何形态主要是柱条和饼环。

如果加上图表的立体效果，还可以进一步将可视化图形划分为点、线、面、体。体指的就是具有 3d 立体效果的几何图形，用于强化图表的体量感和视觉冲击力。

1. 点图类型

散点图主要用于展示两个连续变量间相关性的可视化图表，可用于反映数据的分布情况和对异常值的识别。点的位置由变量值决定，一个变量确定 x 轴位置，另一个变量确定 y 轴位置。如果变量间存在某种相关性，数据点会以相对密集的趋势呈现，反之则呈现随机分布的离散点。数据相关性可以分为正相关、负相关、线性相关、指数相关、不相关等。若有多个数组，则可用形态因素中的颜色、形状等区分不同数组间点的分布情况。

气泡图是散点图的变体，通常包含 3 个以上的变量，其中两个变量即 x 轴和 y 轴的数据，对应的是气泡的位置，其余变量对应的是气泡的大小、颜色等。气泡图一般用于比较和展示不同类别圆点之间的关系，以及整体数据的相关性分析。

2. 线图类型

折线图主要用于显示数据随时间或有序类别变化趋势的可视化图表。通过折线图的上升或下降，可以直观反映数据变化的速度、幅度、范围和周期性。折线图相比于点图更侧重于展示连续数据的变化趋势，而非相关性。

阶梯折线图使用水平和垂直线段连接数据点，主要用于展示特定时间发生突变的数据。

3. 面图类型

柱状图主要是用垂直或水平柱子展示分类数据之间的对比。柱状图的分类数据不宜过多，因为过多的数据可能会导致 x 轴标签旋转，影响阅读。而横向柱状图更适合展示分类数据较多的情况，在满足轴标签完整显示的同时，也能充分利用图表的纵向空间。

面积图是在折线图的基础上，将折线图与坐标轴之间的区域进行填充的可视化图表。相比于折线图，面积图能更好的突显趋势变化中的峰谷数据，以及某个区间范围内的变化情况。不过当多个数据波动剧烈且交叉频繁时，可能会导致面积图视觉混乱，无法辨别数据的变化趋势，这种情况下可考虑用折线图或多面积图表示。

饼图是一种用于显示各个类别在总体中占比关系的统计图表，通常类别数量不宜过多，控制在 7 个以内，若类别有很多，可以将占比较小的类别，合并为“其他”类别项。另外当各类别占比相近时，不适合使用饼图，因为扇形角度差异很小，很难通过视觉对比区分大小关系。环图则是在饼图的基础上，增加了中心显示区域，可以额外显示信息，空间利用率更高。南丁格尔玫瑰图是在极坐标下绘制的柱状图，适合对比大小相近的数值，也适用于表示一个周期内的时间概念（圆的周期特性）

三、点线面的艺术形态在数据可视化中的应用

关于点线面的艺术形态，我们可以从几何图形的形态因素出发，结合数据特征，阐述不同图表类型的设计表现形式。

1. 点图的几何形态设计

点图是由两个或两个以上的变量反应数据分布情况和相关性关系的图表类型。对于非连续型的分类变量，可以通过图形形状、肌理、色彩进行区分。

而对于连续型数据，则可以采用渐变色，反映数据在不同区间的变化分布情况

2. 线图的几何形态设计

线图通常指的是由线条构成的，用于表现数据变化趋势的图表类型。线条的设计要素包括直曲、粗细、阴影和标记点。

当数据量较少时，可以采用曲线折线图，并显示标记点，而当数据量较多时，则更适合用直线折线图，因为直线在数据量密集的情况下，能更清晰地体现出数据的峰谷值。相比直线的硬朗、确定，曲线更显柔美、轻快，因此在选择线条样式时，应当根据产品传递的属性特点进行合理选择。

当变量因子较多时，线条可能不止一条，多根线条可用颜色进行区分。如果变量中，存在对照数据，例如平均值、最大值、最小值时，可以通过线条的粗细、虚实等实现数据间的对比分析。而在设计 3d 折线图时，一般会给线条添加阴影，以打造线条悬浮在图表上的效果。

3. 面图的几何形态设计

面图是由色块构成的，用于反映变量之间对比关系的图表，也有在线图上填充颜色，形成面图的效果，此时的填充色多用于增加线图的体量感和美感。面图的设计要素根据图表类型的不同有所差异，基础柱状图的设计通常要考虑柱子的形状、颜色、宽度和间距，形状一般采用矩形，或圆角矩形，颜色可以是纯色或渐变色，间宽则从数据易读性角度出发，需遵循一定的比例关系，柱状图最佳间宽比为 1:2。不过只要能满足数据传达的清晰、准确、易读，间宽比可适当调整以满足图表的艺术美感。

如果是多变量柱状图，还需考虑变量间的配色，当变量是分类型数据时，通常采用不同的色相组合，若是有序型数据，则可以用同一色相或邻近色的明度和饱和度进行配色。

面积图的设计考虑填充色和透明度，当数据变量较多，面积重叠范围较大时，应当给填充色设定一定的透明度，以保证多个变量重叠范围能在图表中透出。饼图一般用不同色相表示多个变量的占比大小，饼图的旋转方向则是根据扇形面积，按从大到小顺时针的方向排列。

这里分享一个设计案例，我们之前在做数据可视化配置时，存在不同指标数据量差异较大的情况，如果连续配置多个柱状图，可能导致柱子宽度大小不一，过于多变和凌乱。为了解决这个问题，我们借助斐波那契数列，将柱子宽度固定成几个具体数值，从而使连续多个柱状图看起来更具韵律和美感。斐波那契数列从 21px 开始，倒着取值，即 21px、13px、8px、5px、3px、2px、1px，作为移动端柱状图的柱子宽度。可能有人会疑惑，为什么从 21 开始取值，不是 34，首先是尽量控制柱子宽度的梯度范围，避免取值过多，另外 21px 对于数据量最少的情况，已经能满足展示，即使柱子间宽比不符合 1:2，也能保证数据清晰易读。

以上关于可视化图表的几何图形设计还比较基础，属于入门级数据可视化设计的知识范畴，希望可以给到相关从业者，在探索图表样式设计过程中一些指引和启发。欢迎各位提出建议，让我们在数据可视化设计的道路上共同进步。