B 端设计指南（六）：数据图表怎么设计？

根本的控件单元完成后，下面就要开端介绍 B 端规划的另一座大山，图表的规划了。

往期回忆：

图表是什么

在今日，跟着大数据和数据剖析理念家喻户晓，图表在 B 端规划的位置越发重要。那么什么叫图表呢？

图表指能够直观展现计算信息特点和数值的图形表格，关于多数人来说第一次触摸图表概念都源自中小学计算机课程中的 Office Excel 表格教学中。

要了解图表，你就绕不开 Excel 这个软件或其功用方法。咱们都知道 Excel 是一个表格东西，能够恣意填写表格化的信息内容进去。

但那仅仅出现出来的表象，Excel 的真实身份应该是一个数据记载东西，经过这种表格方法记载班级学生成绩、客户联系方法、库房进销记载等等。每一条记载下的信息都是一条独立的 “数据”。

盯着表格看，咱们的确能够看到一些详细的信息、数据、内容。可是，数据的效果仅仅让咱们自己去精确定位想要的内容罢了？显然是否定的。

咱们利用数据的意图，还包括要从许多的数据条目中获得反映真实情况的 “规矩”、“趋势”，假如咱们只盯着数据条目阅览，是很难找出这些信息的。

于是，人类就发明了图表这种可视化东西，协助咱们对数据进行总结，用更直观的视觉方法来知道数据和找出规矩和趋势，这也是为什么 Excel 是最强壮的图表出产软件的原因之一。

图表的类型

数据根据自身的特性和运用场景，对规矩的反映也各不相同。比方你想知道某个城市房子均价趋势和某个区房子出售总量在全市的占比，便是两种彻底不同的数据总结方法。

面对这种计算上的差异，咱们也就创造出了不同的图表展现类型，协助咱们更有用的知道数据。比方咱们从初中开端就学习过的柱状图、折线图、饼图等等。

可是，在数据和计算的世界里，包括的图表类型远远不止这几种，还有十分多只能运用在特定场景，你有点印象在新闻见过的，或感觉是显现故障生成的图表类型。

干流书籍、干货将这数以百计的图表划分红 4 个大类，别离是比较、散布、构成、联系。每品种型对应不同的数据展现要求和效果。

而阿里的 Antv 则定制了一个更详细的图表分类目录，包括比较、趋势、组成、占比、散布、排名、联系、空间等 8 个大类。

能够拜访下方的链接查询：https://antv.vision/zh

了解图表的分类、概念是未来咱们进行规划和根据数据展现需求挑选图表的根据和常识根底。详细的每个分类包括的含义，以及运用规矩，咱们会在后边解说。

并且，除了运用纬度上的区别，咱们还会将图表区别红一般的图表和进阶图表，详细区别理由会在下方解说。

图表的构成

尽管图表包括了许多分类，可是图表都是由根本的数据内容生成的，它们包括详细的生成规矩。

关于根底的图表来说，它们必定包括两种元素 —— “纬度”和“数值”。当咱们需求去创立图表的时分，就要做一个挑选，运用什么纬度和数值。

比方下面这组数据，在一次体检中有三个班级的 5 个同学，他们的身高、体重、体脂率、肌肉含量、视力各不相同。

在这个数据图表下，咱们要生成一个柱状图，那么纬度就有两个可选项，班级或者详细同学，数值则包括身高、体重、体脂、肌肉量、视力五个特点。

比方咱们运用同学做纬度，体脂率作为数值，那么就能够生成根底柱状图。

纬度和数值是构成一般图表的柱石，纬度表明的是你图表中要包括多少不同的模块，数值则表明你要显现这些模块的哪些数值。

纬度通常指某个详细的人、日期、事情、分类，通常是不行量化的内容。而数值则是指包括可量化的数据类型，要点要记住数值是指 “数据类型”，而不是指详细的参数值。

再进一步，上方生成的图表，尽管直接反映了咱们挑选的纬度、数值的情况，可是一个完好的图表还会包括一些 “解说” 性元素，来让观看者更好的知道这些图形和信息。

所以，一个完好的图表中可能还会包括标题、单位、纬度图例、网格、选中提示等内容，用来提升其阅览性。

不同图表，需求包括的元素会有必定的差异，需求因地制宜，咱们会在后边的详细介绍中添加一部分介绍的信息。

一般图表和高档图表

最后，咱们还要解说一下，什么是一般图表，什么是高档图表。

一般图表就即只反映纬度、数值两个方面的图表类型，根本都是咱们日常日子中经常触摸，马上都能看懂的。

可是进阶图表就不是那么简略了，进阶的图表包括除了纬度、数值外的其它类型数据，如分类、区域、日期、性别等不同品种。

比方下面这个散点图，除了身高（纬度）、体重（数值）外，还表现了个体（圆点）、性别（颜色）。在图表本身的解说性元素中，还包括散布区域、最大最小值标识、体重/身高均值。

这已经超出没一个没有触摸过计算的新手认知范畴了，是需求详细学习才干学会如何阅览和运用的图表。

这仍是最根底高档图表，往后还有相似桑基图、K 线图（韭菜的自我修养）、环形布局联系图等类型，它们有各自运用的标准、参数，以及运用的场景。

这些图表的确十分的复杂笼统，制作起来也十分麻烦。可是，这些图表并不是展现数据的终点。由于当数据涉及到真实世界的客体时，咱们发现能够经过更直观的展现方法来出现数据，将某些纬度或数值用更低门槛的图形来表明，了解起来就更简单。

比方下面的事例，咱们不必将城市纬度作为一个枯燥的字段放进图表中，而是直接运用地图进行出现，那么不仅了解起来更直观，并且十分方便咱们对区域进行剖析和对比。

这便是所谓的数据可视化的运用实例，数据可视化并不仅仅是做一些根底的图表，而是根据咱们对数据剖析的需求，输出适宜的可视化图形。

把握越多图表类型、可视化运用事例，就越有助于咱们应对复杂的项目数据展现需求。

结语

本篇内容剖析到这儿，下一篇共享会持续共享图表规划和运用的相关常识。

由于图表的常识能够写的实在太多了，所以我们假如有想了解的仍是实际项目中的疑问，能够在下面留言，有适宜的常识点我就能够添加到下篇共享中去。

感谢我们收看，下篇再贱～

欢迎重视作者的微信公众号：「超人的电话亭」