💎【行业认证·权威头衔】
✔ 华为云天团核心成员：特约编辑/云享专家/开发者专家/产品云测专家
✔ 开发者社区全满贯：CSDN博客&商业化双料专家/阿里云签约作者/腾讯云内容共创官/掘金&亚马逊&51CTO顶级博主
✔ 技术生态共建先锋：横跨鸿蒙、云计算、AI等前沿领域的技术布道者

🏆【荣誉殿堂】
🎖 连续三年蝉联"华为云十佳博主"（2022-2024）
🎖 双冠加冕CSDN"年度博客之星TOP2"（2022&2023）
🎖 十余个技术社区年度杰出贡献奖得主

📚【知识宝库】
覆盖全栈技术矩阵：
◾ 编程语言：.NET/Java/Python/Go/Node…
◾ 移动生态：HarmonyOS/iOS/Android/小程序
◾ 前沿领域：物联网/网络安全/大数据/AI/元宇宙
◾ 游戏开发：Unity3D引擎深度解析

🚀前言

本章主要介绍数据可视化的基础知识、数据可视化图表和数据可视化工具。内容主要涵盖数据与数据可视化的基本概念、数据可视化的分类、数据可视化的过程（Ben Fry可视化流程、可视分析学的标准流程、数据可视化过程中的核心要素），以及数据可视化设计原则等内容。通过学习本章内容，读者可以深入了解数据可视化的基本原理和方法，掌握数据可视化的核心要素，为后续的数据分析和决策提供支持。

🚀一、数据可视化图表

数据可视化是以图形、图像和动画等方式直观生动地呈现数据及数据分析结果，揭示数据之间的关系、趋势和规律等，便于人们更好地理解数据。常用的数据可视化图表有很多，这里选择几种有代表性的图表进行介绍。

🔎1.常用的数据可视化图表

数据可视化的成功与否，很大程度上取决于是否选择了正确的图表类型。每种图表都有其擅长表达的特定数据关系和场景，理解其原理与适用性是进行有效设计的基础。

🦋1.1 柱形图与条形图

柱形图与条形图（见图1-8、图1-9）是以高度（柱形图）或长度（条形图）的差异来显示统计指标数值的一种图形。其核心是通过视觉上可比较的长度编码数据大小。

• 柱形图：纵轴为可量化的变量，适用于显示一段时间内的数据变化（时间序列）或比较不同类别的数值。
• 条形图：横轴为可量化的变量，本质上是柱形图旋转90度而成，特别适合类别名称较长或类别数量较多的情况，因为横向布局提供了更多的标签书写空间。

图1-8 柱形图示例

图1-9 条形图示例

主要特点与适用场景：

• 清晰比较：能够直观、清晰地比较各个数据点（个体）之间的大小差异。
• 排序：天然适合展示数据的排序关系（如从高到低排列）。
• 局限性：不适合展示部分与整体的关系（饼图更优）或复杂的数据趋势（折线图更优）。

设计要点：

• 为提升可读性，柱形/条形之间应保持适当的间距。
• 使用一致且具有区分度的颜色，尤其当需要突出某个特定数据时。
• 避免使用三维透视效果，以免扭曲对数值大小的判断。

🦋1.2 折线图

折线图（见图1-10）是用直线段将各数据点连接起来形成的图形，通过线条的起伏变化来展示数据随时间或其他有序维度变化的趋势。

• 通常，水平轴（X轴）表示时间或连续的有序变量，垂直轴（Y轴）表示数值。
• 折线图的核心价值在于揭示数据的趋势性、周期性和波动性。

图1-10 折线图示例

设计要点：

• 横轴尺度：横轴的长度和刻度间隔对趋势的感知影响巨大。过长会使趋势显得平缓甚至夸张波动，过短则可能掩盖真实变化。需要根据数据周期和展示目的进行合理设置。
• 数据点标记：在关键的数据点（如峰值、谷值、转折点）处添加标记或标签，有助于读者精确解读。
• 多线对比：使用不同颜色或样式的线条在同一图表中展示多个数据系列时，需确保它们清晰可辨，并配备图例。

🦋1.3 散点图与气泡图

散点图（Scatter Plot）用二维平面上的一系列散点来描述数据，每个点的位置由其两个变量的值（X， Y）决定。它主要用于探索和展示两个连续变量之间的关系（如正相关、负相关、无相关）或发现数据中的集群、异常值。

气泡图（Bubble Chart）是散点图的变型，引入了第三个维度。

• 在气泡图中，前两个维度（X, Y）仍决定气泡的位置，而第三个维度（通常是数值型变量）则通过气泡的面积或半径来编码。
• 如图1-11所示，可以用气泡图展示不同城市的“人均GDP”（X轴）、“幸福指数”（Y轴）和“人口规模”（气泡大小）之间的关系。

图1-11 气泡图示例

适用场景与注意事项：

• 散点图适用于观察两个变量间的关联性。
• 气泡图能同时展示三个变量的关系，但人类视觉对面积/大小的感知不如对位置精确，因此气泡图更适合展示趋势和大致比较，而非精确读数。
• 当气泡过多或大小差异悬殊时，可能导致图表难以阅读，此时可能需要交互（如筛选、悬停查看详情）或进行数据分组/聚合。

🦋1.4 饼图与环形图

饼图与环形图（见图1-12）通过扇形（或圆环的一部分）的弧度、圆心角及面积来反映该部分数据在总体中所占的比例。

• 核心功能：表现部分与整体的构成关系（占比）。
• 环形图：可视为饼图的中心被挖空，其中心区域常被用来展示总体的关键指标或标题，视觉效果更现代。

图1-12 饼图与环形图示例

使用准则（争议与最佳实践）：
虽然饼图非常流行，但在数据可视化专家中对其有效性存在争议，主要因为人眼难以精确比较不同扇形的角度或面积。

1. 确保总和为100%：各部分百分比（或实际值）相加必须等于整体。
2. 限制分类数量：建议类别不超过5-7个。过多会使扇区变得细碎，难以比较。多余的小类别可合并为“其他”。
3. 明智排序：通常将最大的扇区从12点钟方向开始，按顺时针方向依次排列。或将最重要的类别放在12点钟位置。
4. 谨慎用色：使用差异明显的颜色区分扇区，但避免过于花哨。需要强调的扇区可以使用更醒目的颜色或将其“拉出”（分离式饼图）。
5. 考虑替代方案：对于需要精确比较多个部分大小的场景，条形图通常是更优的选择。

🦋1.5 雷达图

雷达图（Radar Chart，又称蜘蛛网图）将多个维度的变量映射到从中心点放射出的不同轴线上，并将同一系列在各轴上的值用线连接起来形成一个多边形。

• 适用场景：适用于展示个体在多个维度上的表现，便于进行多维度能力概览或对比。例如，比较不同球员的技术统计（速度、力量、技巧等）、评估产品在不同指标上的表现。
• 要求：每个维度必须是可排序的，且通常需要统一量纲或进行标准化处理，以便在不同轴向上进行公平比较。

图1-13 雷达图示例

解读复杂性与设计建议：

• 雷达图解读有一定难度，多边形形状的差异不易直接转化为具体维度的优劣判断。
• 建议：始终添加清晰的轴标签和刻度；如果用于对比，不同系列应使用不同颜色并配备图例；可以在中心或旁边添加简要的文字解读，指出关键的优势或劣势维度。

🦋1.6 词云图

词云图（Word Cloud，文字云）是一种通过视觉化展示文本数据中关键词频率的图表。

• 原理：文本中出现频率越高的词，在词云中显示得越大、越突出。
• 功能：快速过滤大量文本信息，让观者一眼扫过即可把握文本主旨、高频主题或情感倾向。

图1-14 词云图示例

应用与局限性：

• 应用：常用于分析社交媒体话题、用户评论、新闻文章、书籍内容摘要等。
• 局限性：词云通常不适用于精确的定量分析，它更多地提供一种直观的定性印象。词的位置、颜色（若不编码额外信息）多为随机或出于美学安排，不包含信息量。

🦋1.7 矩形树图

矩形树图（Treemap）使用一组嵌套的矩形来显示层次结构（树状）数据。

• 原理：整个矩形代表整体。每个分支被表示为一个较小的矩形，其面积与该分支的数值大小成正比。同一层级的矩形平铺排列，无间隙。
• 布局：通常，面积较大的矩形被放置在左上角（起始阅读位置），以方便快速定位主要部分。

图1-15 矩形树图示例

适用场景：

• 非常适合展示部分-整体关系，尤其是当分类具有层次结构且数量较多时（如文件目录大小、投资组合构成、电商商品类目销售占比）。
• 能在有限空间内高效展示大量数据，同时揭示层次和比例关系。

🦋1.8 南丁格尔玫瑰图

南丁格尔玫瑰图（Nightingale Rose Chart）是一种极坐标下的图表，外形类似饼图，但使用扇形的半径（而非角度/面积）来编码数值。

• 历史：由弗洛伦斯·南丁格尔首创，用于生动展示战时士兵死亡原因统计数据，以说服决策者。
• 视觉特性：由于面积与半径呈二次方关系（面积 ∝ 半径²），玫瑰图会系统性放大数值之间的视觉差异。一个数值是另一数值两倍的类别，其扇形面积看起来会是四倍大。

图1-16 大学生听歌时的情绪分布（南丁格尔玫瑰图）

适用性与注意事项：

• 优势：在需要强烈视觉冲击和突出差异以引起关注或讲述故事时非常有效。对于数值非常接近的数据，其视觉差异比饼图更明显。
• 劣势：严重牺牲了量化读取的精确性。观众很容易高估大数值类别与低估小数值类别之间的差距。因此，在需要严谨、精确比较数值大小的科学或商业分析中，应避免使用。
• 结论：它是一种强大的叙事和沟通工具，但却是糟糕的精确分析工具。

🦋1.9 漏斗图

漏斗图（Funnel Chart）形如漏斗，用于展示一个具有逻辑顺序的流程中，各环节的转化或衰减情况。

• 原理：流程起始量设为100%（最宽的梯形），后续每个环节的数值依次用更窄的梯形表示，直观显示用户、客户或物料的“流失”过程。
• 标准设计：所有梯形应具有相同的高度，以便通过顶边和底边的宽度差异（即梯形的斜边）来准确判断数值下降的幅度。

图1-17 漏斗图示例

核心应用场景：

• 销售管线分析
• 用户行为转化分析（如AARRR模型）
• 招聘录用流程
• 任何需要分析和优化多步骤业务流程的场景。

设计要点：

• 确保各环节有清晰的逻辑顺序。
• 使用同一个度量单位（如人数、金额、百分比）。
• 可在梯形内部或旁边标注该环节的绝对数值和转化率（从上一步到此步的留存率）。

🦋其他常见可视化形式

除上述图表外，还有许多专门化的可视化形式，例如：

• 水波图（Liquid Fill Gauge）：动态展示百分比完成度，具有动感和吸引力。
• 指标卡（KPI Card）：突出展示最关键的一两个数字指标（如总销售额、同比增长率）。
• 仪表盘（Dashboard）：并非单一图表，而是将多种相关的图表、指标卡和控件组合在一个界面上，提供业务或系统的综合视图。

图1-18 水波图示例
图1-19 指标卡示例
图1-20 仪表盘示例

选择合适的图表是数据可视化成功的关键。选择时，应始终从目标和需求出发：

1. 想比较数值大小？ → 优先考虑柱形图/条形图。
2. 想观察趋势 over time？ → 折线图是最佳选择。
3. 想展示部分占总体的比例？ → 饼图/环形图（类别少时），或矩形树图（类别多且有层次时）。
4. 想分析变量间的关系？ → 散点图（两个变量）或气泡图（三个变量）。
5. 想进行多维度能力对比？ → 雷达图。
6. 想呈现流程转化？ → 漏斗图。
7. 想快速洞察文本主题？ → 词云图。
8. 想进行强烈的视觉叙事？ → 南丁格尔玫瑰图（但需知其局限性）。

在实践中，往往需要将多种图表组合使用，或在一种基础图表上进行创新性设计，以求在最短时间内以最清晰、最准确的方式传达数据背后的信息。

🔎2.数据可视化设计原则

数据可视化的主要目的是向用户清晰、准确地展示和传达数据所包含（隐藏）的信息，并辅助其完成分析与决策。一个糟糕的可视化设计不仅无助于理解，反而可能造成认知负担、曲解数据本意，甚至导致错误的结论。因此，了解并掌握科学、系统的数据可视化设计原则至关重要。优秀的设计原则是沟通数据事实与用户认知的桥梁，能够在功能、效率与美学之间取得平衡。

🦋2.1 直观映射原则

直观映射原则是数据可视化设计的核心与基石。它强调从数据到视觉元素的转换必须直观、准确且高效，使用户能够以最小的认知努力获取最丰富、最准确的信息。

核心思想：可视化设计应服务于用户的认知，而非设计者的炫技。设计者不仅需要深刻理解数据的语义（数据的含义、关系和结构），还必须了解目标用户的认知习惯、知识背景和核心任务。

具体实践准则：

1. 图表选择简洁易懂：选择最符合数据特征和传达目标的图表类型（如比较用柱状图、看趋势用折线图）。避免使用不必要的复杂图表或生僻的视觉隐喻，确保信息的“可解码性”。
2. 视觉编码准确无误：视觉通道（如位置、长度、颜色饱和度、面积）与数据值的映射关系必须准确且符合人类感知特性。例如，用长度或高度表示数值大小比用面积或颜色深浅更精确；避免使用扭曲的透视或非线性比例尺误导读者。
3. 摒弃无意义的装饰：坚决避免“图表垃圾”，如无意义的3D效果、过于花哨的背景图案、装饰性图形等。这些元素会干扰对核心数据层的感知，破坏准确性。正如数据可视化先驱爱德华·塔夫特所倡导的：“最大化数据-墨水比”，即让墨水尽可能多地用于呈现数据本身。
4. 真实反映数据：绝不能为了追求视觉上的“美观”或“冲击力”而篡改、扭曲或选择性忽略数据。完整性、客观性和准确性永远是第一位的。

🦋2.2 视图设计原则

视图设计原则关注可视化呈现的具体细节，通过一系列具体的设计规则，确保生成的视图既专业又易于解读。

（1）颜色运用
颜色是强大的视觉通道，但也极易被误用。

• 区分与对比：用色相区分不同类别或序列（定性数据），用同一色系的饱和度或明度变化表示数值大小（定量数据）。确保颜色对比鲜明，对色盲用户友好（可使用红-绿以外的对比组合，如蓝-橙）。
• 语义一致性：尽可能使用符合文化或领域惯例的颜色（如红色表示警告/亏损，绿色表示安全/盈利）。在多个图表中，相同含义的数据应使用一致的颜色。
• 节制使用：避免使用过多颜色，通常一个图表中的主要色相不宜超过6-7种，以免造成视觉混乱。

（2）标签和标题
文字是消除视觉歧义的关键。

• 标题明确：标题应直接点明图表的主题和核心结论，而非仅仅描述“XX趋势图”。
• 坐标轴标签清晰：坐标轴必须有清晰的标签，注明变量名称和单位。刻度值应易读，避免过度密集。
• 数据标签审慎：在关键数据点（如最大值、最小值、拐点）上直接标注数值，可以提升读图效率，但需避免标签堆叠遮挡图形。

（3）比例和大小
合理的比例和布局是良好可读性的保障。

• 元素尺寸：图形元素（如柱子的宽度、气泡的大小）应适中，既能清晰区分，又不会过度拥挤或稀疏。
• 留白（负空间）：合理的留白可以区分不同的视觉组块，引导视线，提升图表的优雅感和可读性。

（4）网格和轴线
网格和轴线是读取具体数值的标尺。

• 辅助而非主导：网格线应为淡灰色细线，起到辅助读数的作用，而不应喧宾夺主，干扰数据本身的呈现。
• 轴线刻度合理：坐标轴的起始值（尤其是Y轴）通常应从0开始，以避免夸大差异。特殊情况下如需截断，必须有明确的视觉提示（如折断符号）。

（5）视觉层次
通过设计引导用户的注意力流。

• 突出核心：利用位置（通常左上角或中央）、大小、颜色对比等手段，将最重要的信息置于最突出的视觉层次。
• 组织信息：通过分组、对齐、间距等手法，将相关的信息在视觉上组织在一起，无关的信息分离开来。

（6）一致性
一致性是构建用户信任感和降低学习成本的关键。

• 风格统一：在同一仪表板或报告中，所有图表应保持统一的配色方案、字体、标记符号等视觉风格。
• 交互逻辑一致：相似的交互操作（如悬停、点击、缩放）在所有视图上应产生一致的反饋。

🦋2.3 数据筛选原则

“少即是多”在信息呈现中往往成立。数据筛选原则旨在对抗信息过载，赋予用户掌控权。

核心思想：设计者不应试图在一个静态视图中塞入所有数据细节。相反，应提供一个清晰的概览，并允许用户通过交互去探索其感兴趣的细节。

具体实践准则：

1. 分层递进：遵循“概览先行，缩放过滤，按需详情”的视觉信息 seeking mantra。首先展示核心摘要或宏观趋势。
2. 提供交互控制：为用户提供筛选器（如下拉菜单、滑块、时间轴选择器）、高亮、详情查看（悬停提示框）、下钻/上卷等交互手段。让用户能够自由地聚焦于特定的数据子集（如某个时间段、某个地区、某个产品类别）。
3. 视图联动：当存在多个关联视图时，在一个视图中的筛选或选择操作应能实时联动并高亮其他视图中的相关数据，帮助用户发现跨维度的关联。

🦋2.4 美学原则

功能完善是及格线，形式优美是加分项。美学原则关注如何在保证准确和清晰的前提下，提升可视化作品的视觉吸引力和情感共鸣，使其成为一件既好用又好看的设计作品。

美学原则主要有以下3种：

（1）聚焦原则
设计必须有明确的视觉焦点，主动引导用户的视线。

• 技术手段：通过对比色（与其他元素形成鲜明色相对比）、留白（将焦点元素与周围隔离）、动态效果（谨慎使用动画吸引初始注意力）、空间位置（置于视觉中心）等方式，将用户的注意力引向最关键的数据洞察或结论。
• 目的：避免用户在海量图形元素中迷失，确保核心信息被第一时间捕捉。

（2）平衡原则
视觉元素在画面中的分布应给人以稳定、和谐的感受。

• 对称与不对称平衡：可以将主要图表元素置于视觉中心附近。元素的视觉“重量”（由大小、颜色深浅、复杂度决定）应在画面上均衡分布，避免头重脚轻或一边倒。
• 有效利用空间：合理安排图表、图例、标题、注释的位置，使整个构图饱满而不拥挤，有序而不呆板。

（3）简单原则
这是对“直观映射”原则在美学层面的呼应，也是现代设计的核心理念。

• 减少认知负担：坚决去除所有不必要的图形元素、装饰、纹理和效果。每一个被添加的像素都应该有其明确的传达目的。
• 追求优雅简洁：用最精炼的视觉语言表达最丰富的数据内涵。复杂的视觉效果往往昙花一现，而简洁、清晰的设计具有持久的生命力。

遵循以上四大原则——直观映射、视图设计、数据筛选和美学原则——将系统性地指导设计者创建出功能强大、表达准确、交互友好且视觉悦人的数据可视化作品。

最终，所有原则都服务于同一个终极目标：高效、准确、无障碍地实现数据与人的沟通，将冰冷的数据转化为有温度、有洞察的视觉故事，从而驱动理解、激发思考、辅助决策。在实际设计中，这些原则往往需要综合权衡与灵活运用，而非机械套用。持续的实践、反馈与迭代，是掌握数据可视化设计艺术的不二法门。