数据可视化之旅，从数据洞察到图表呈现，可视化的产品设计-CSDN博客

本文链接：https://blog.csdn.net/jonyleek/article/details/141216435

图表作为数据可视化的重要工具，是对原始数据进行深度加工与解读的有效手段，它助力我们洞悉数据背后的真相，使我们能更好地适应这个由数据驱动的世界。无论是工作汇报、项目实施、产品设计、后台界面还是数据大屏展示，图表都扮演着至关重要的角色。

然而，在实际工作过程中，我发现许多开发人员或者产品经理对于图表设计的理解与运用并不深入，同时市场上关于图表设计的系统化资料也相对不够系统化，难以形成完整的产品设计体系。因此，我基于自身的产品设计经验和理解，整理撰写了这篇文章，旨在为设计师们提供有益的指导与帮助。

当我们对图表的结构进行深入拆解后，会发现一个完整图表组件实际上是由多个细小的部分组合而成的，它们分别是：标题、轴、图形、图例、标签以及提示信息，如下图所示：

除了样子以外，每个图都含有自己的信息量，我们需要选择合适类型的图形用于展示不同的内容，这个这个就要看我们主要想表达什么内容了，四个数据图表都是用的一样基础数据，只是在展示的类型、细分配置方式上不同，所表现出来的效果就不同。

那么，接下来，我会一点一点地为大家讲解它们。

作为产品设计人员，我深知一个明确且与内容相符的标题对于图表的重要性。它能够迅速帮助用户理解图表所要传达的信息。通常，我们会根据图表的内容来确定其标题，这看似简单，但实际上却有不少讲究。

标题配置包括：标题的icon 图标展示、主标题内容、副标题内容设置，如上图所示：相同的数据集（内容）得到不同的展示效果。

不同类型的组件表达的内容形态不同，大致分为几个类型的图表，包括分类对比、趋势展现、组成分析、数据分布等几个方面

按照组件原子化的思路来定义现在千奇百怪的图表，大致可以分为六种基础样式：折线，面积，散点，气泡，饼/环，柱形，条形。

主题用于图表之间的颜色展示的，可以对单一组件进行主题色设置，可以对整个页面设置统一的主题色，系统定义了一系列的主题色系，也提供了可以自定义的主题颜色。

主题除了设置颜色，还可以设置颜色的渐变等效果

图例用于展示数据对比的说明

轴是能够使每个数据能有效的按照空间概念分布展开，数轴在数据量大的时候尤为重要，如下图所示，

其实两个折线图都是一样的数据，只是第二个折线图设置了数据缩放功能，用户在查看的时候既可以保持整体的趋势判断，又可以查看细节的数据展示。

在数据分析领域，我们常常说“眼见为实”，这强调了图表作为数据可视化工具的重要性。选对了图表，就能让数据信息的传达变得更为迅速且直观。

要选择适合的图表，我认为可以遵循以下三个步骤：

明确核心信息：首先要清楚你想要通过图表传达的核心数据或信息是什么。

分析数据关系：接着要判断数据之间的比较或关联类型，比如是显示占比关系、数量对比，还是趋势变化等。

选定图表类型：最后，根据数据的含义和比较关系，选择最合适的图表类型来呈现，比如饼图适合展示占比，柱状图适合数量对比，折线图则适合展示趋势变化等。

同一组数据用不同的角度看，有不同的主题，比如下面这组数据：

左图的柱状图主要展示出来的每个月数据的增长量，右图展示的数据增长的同时，主要是来源于哪些数据类型。

综上所述，选择合适图表的关键，最初也是最重要的，就是明确要用图表传达的核心信息。

在实际工作中需要用图表反映数据的场景各种各样的，但按数据关系分类大致分为以下几种情况：