这么做数据可视化，你不升职加薪都难

转载自 大数据深度分析

如何搭建数据可视化系统，使复杂和庞大数据用丰富的涉及语言清晰表达，并形成鲜明的设计风格？我们对数据可视化方法进行了结构化并建立了相应的规范体系。

一图看全文

（一）数据可视化分类

就现在数据可视化领域，对数据可视化的整体分类分为两类：Map和Chart。所谓Map就是利用可视化的地图工具展示数据在地理位置上的分布和迁移，制作需要专门的软件； Chart是大多数频繁接触的一种表现形式，本篇文章仅讲解Chart的使用。

（二）数据可视化原则

在很早之前，麦肯锡人就确立了他们使用图表的基本原则： 1.通常使用黑色和白色印刷，除非绝对有必要；2.基本不用三维制图；3.坚持一图明一事的重要原则。 哪怕这些原则是很早之前总结的，但对现在仍适用。当然，除了第一条，日新月异的技术发展，使得数据人可以用对比更加鲜明，更为赏心悦目的方式制作图表，以更好地实现直观展示数据的目的。

（三）可视化模型的组成

我们一直在思考，随着人工智能的发展，未来还有哪些工作是人工智能无法取代的。抛开资本拥有者的价值不谈，就绝大多数人两种核心竞争力是永远无法被人工智能取代的：一是人的创造力；二是人的沟通能力，或者说作为人去解决人的问题的能力。这同时也给我们以警醒，其实，现在所有行业内存在着大量的岗位，工作是规律性、有逻辑可循的，为了减少人在里面的作用，同时减少人为的出错概率，这就出现了一个词——模型。模型的出现确确实实减少了人的很多工作量，但这并不意味这这个人会被取代，反而更能突出他的创造力——将业务逻辑总结规律向数字逻辑转化的能力。

就模型的组成区域而言，大体可以分为：封面，自定义区域、数据源区域、分析辅助区域、业务预警区域、业务分析区域、报告展示区域、使用说明（IYN）、字段解释（IYN）。其中报告展示区域是决定你这个模型水平的临门一脚，好的数据可视化方式会为这个模型加分不少。

如何将海量的数据转换为直观可视化的模型展示，本篇文章将不做篇幅说明。

（四）Chart可视化的使用方法

1.Chart 的元素组成

就完整的图表组成，它分为 标题、坐标轴、单位、主区域、数据标签、图例等，如有需求还会增加趋势线、误差线等辅助工具 。完整的图形以上六大元素缺一不可，否则图表受众会丈二和尚摸不着头脑，也会为指导业务带来了一些人为不必要的麻烦。

2.Chart 的选择原则

2.1 图表基本类型

最新版的office 2016 Excel提供了超过17种图表可供选择，但我们在大多数使用场景仅六种基本图表即可满足需求，也就是数据可视化最常用的图表类型：

柱形图 ，用来反映分类项目之间的比较；

饼图 ，用来反映构成，即部分占总体的比例；

折线图 ，用来反映数据随时间变化的趋势；

条形图 ，用来反映分类项目之间的趋势；

散点图 ，用来反映相关性或分布关系；

地图 ，用来反映区域之间的分类比较；

基本图表类型都有通用的样式，不做过多的展开讲解。我们更多的考虑是如何选择正确的图表来呈现数据，达到直观、美观数据可视化的目标。

基本方法：明确目标-->选择图形-->梳理维度-->突出关键信息。

a. 明确目标

明确数据可视化的目标，通过数据可视化我们要解决什么样的问题，需要探索什么内容或陈述什么事实。

b.选择图形

围绕目标找到能提供信息的指标或者数据，选择合适的图形去展示需要可视化的数据。

Andrew Abela 整理的图表类型选择指南图示，将图表展示的关系分为四类：

c. 选择维度

分辨哪些是有价值的值得关注的维度，选择数据展示的视角。基本图表一般有哪些可用维度呢？

基本图表维度

对照以上图形维度，制作可视化图形。

d.突出关键信息

根据可视化展示目标，将重要信息添加辅助线或更改颜色等手段，进行信息的凸显，将用户的注意力引向关键信息，帮助用户理解数据意义。

CPU 使用率监控案例，可视化的目标就是检测 CPU 的使用情况，特别是异常使用情况。所以图中将 100%最高临界线使用特殊的颜色和线形标识出来，异常的使用段用颜色帮助用户识别。

2.2 Chart 的排版

在可视化展示中，往往有多组数据进行展示。确立我们的OMTM（第一指标），通过信息的构图来突出重点，在主信息图和次信息图之间的排布和大小比例上进行调整，明确信息层级及信息流向，使用户获取重要信息的同时达到视觉平衡。

2.3 Chart 的颜色搭配

由于图表的特殊性，数据可视化的配色方案和配色要求具有独特性。配色方案要充分考虑到特殊人群对数据图的可读性。丰富的色系，至少 6 种才可满足图表应用的各种场景。同时配色需要有可辨识性，色彩选择需要有跨度

A. 背景色定义

配色体系分为深色底、浅色底、彩色底的图表设计 。背景色的选择与可视化展示的设备相关。

在大屏设备中普遍用黑色（深色）作为底色 ，以减少屏幕拖尾，观众在视觉上也不会觉得刺眼。所有图表的配色需要以深色背景为基础。保证可视化图的清晰辨识度，色调与明度变化需要有跨度。

中小屏幕显示选择范围就比较广，浅色、彩色、深色均可以做出很好的设计， 但是相比之下，浅色底会使数据更加突出。

淘宝双11大屏设计

B. 图表色定义

在图表的颜色运用上，色彩是最直接的信息表达的方式，往往比图形和文字更加直观的传递信息，不同颜色的的组合也能体现数据的逻辑关系。

a.色彩辨识度

要确保配色非常容易辨识与区分，对于使用单一色相配色，明度差异需要全局考虑，明度跨度一定要够大。可以在灰度模式下测试配色的辨识度。

b.色彩跨度

多色相配色在数据可视化中是相当常见的，多色相配色使用户容易将数据与图像联系起来。如何有效利用色调的变化来传达数据信息？

带明度信息的色环

当需要的颜色较少时，避免使用相近的色相同类色和相近色。尽量选择对比色或互补色，这样可以使不同属性数据在图表中展示更加清晰。

当图表需要的颜色较多时，建议最多不超过 12 种色相。通常情况下人在不连续的区域内可以分辨 6~12 种不同色相。过多的颜色对传达数据是没有作用的，反而会让人产生迷惑。如何让多种色相的颜色看来和谐？

有几种取色的方法：

色环提取法：

选择同一饱和度和明度的不同色调作为可视化图表的配色，这样可以使图表看起来协调统一。

渐变色取色法：

不同明度和色相的取色，淡紫到深黄的过渡，与淡黄到深紫的过渡，感觉是一样的配色，但是实际两种配色实际感觉却差别很大。

淡黄到深紫的过渡看起来更加自然，这是因为我们在自然中大多存在的都是淡黄向深紫的过度。如下图，所以采用仿自然的配色方式会让图表更加自然。

2.4 Chart 字体的选择

文字是数据可视化的核心内容之一，文字和数字是数据信息传达的重要组成部分，为了更加清晰精确的传达信息，增加信息的可读性，从字体选择，到字体大小，字体间距都有特定的要求

C.字体的选择

a.辨识度

UI 设计中使用无衬线字体是 UI 界的共识，但是对于数据可视化设计而言，字体大小的跨度可以非常大，所以在无衬线字体中需要选择辨识度更高的字体，大的宽度比值和较高的 x-height 值的字体有更高的辨识度，选择字母容易辨识不会产生奇异的字体更有利于用于数据可视化设计。

b.更加灵活的字体

字体需要更加灵活，应该支持尽可能多的使用场景，数据可视化项目经常显示在不同大小、不同的终端上，需要选择更加灵活的字体可以在低分辨率的小屏或超大屏幕上运行良好。

c.字间距

宽松的字母间距（字母之间的间距应小于字偶间距）和合适的中文字间距。

D .字体大小

文字的可读性对数据可视化起着至关重要的作用，设置小字体的极限值，以保证在最小显示时不影响对文字的辨认与阅读。

E.中西文间隔

中西文混排时，要注意中文和西文间的间隔，一般排版的情况都是中文中混排有西文，所以需要在中西文间留有间隔，帮助用户更快速的扫视文字内容。

小结：我们生活在一个大数据时代，越来越多的数据被可视化。在构建可视化体系时，无论图表、颜色、字体、都是承载和传达数据信息的元素，设计的核心是“让数据清晰传达”。

纸上得来终觉浅，绝知此事要躬行。在一切之上，你需要变得值得依赖。

晚安。