2021-06-17

一、什么是数据可视化？

数据可视化研究的是，如何将数据转化成为交互的图形或图像等，以视觉可以感受的方式表达，增强人的认知能力，达到发现、解释、分析、探索、决策和学习的目的。

“数据可视化（Data Visualization）和信息可视化（Infographics）是两个相近的专业领域名词。狭义上的数据可视化指的是数据用统计图表方式呈现，而信息可视化则是将非数字的信息进行可视化。前者用于传递信息，后者用于表现抽象或复杂的概念、技术和信息。而广义上的数据可视化则是数据可视化、信息可视化以及科学可视化等等多个领域的统称。”
——《数据可视化之美》

广义的数据可视化涉及信息技术、自然科学、统计分析、图形学、交互、地理信息等多种学科。

“科学可视化（Scientific Visualization）、信息可视化（Information Visualization）和可视分析学（VisualAnalytics）三个学科方向通常被看成可视化的三个主要分支。这三个分支整合在一起形成的新学科“数据可视化”，是可视化研究领域的新起点。”
——《数据可视化》

科学可视化

科学可视化（Scientific Visualization）是可视化领域最早、最成熟的一个跨学科研究与应用领域。面向的领域主要是自然科学，如物理、化学、气象气候、航空航天、医学、生物学等各个学科，这些学科通常需要对数据和模型进行解释、操作与处理，旨在寻找其中的模式、特点、关系以及异常情况。

信息可视化

信息可视化（Information Visualization）处理的对象是抽象数据集合，起源于统计图形学，又与信息图形、视觉设计等现代技术相关。其表现形式通常在二维空间，因此关键问题是在有限的展现空间中以直观的方式传达大量的抽象信息。与科学可视化相比，科学可视化处理的数据具有天然几何结构（如磁感线、流体分布等），信息可视化更关注抽象、高维数据。柱状图、趋势图、流程图、树状图等，都属于信息可视化最常用的可视表达，这些图形的设计都将抽象的数据概念转化成为可视化信息。

可视分析学

可视分析学（Visual Analytics）被定义为一门以可视交互为基础的分析推理科学。它综合了图形学、数据挖掘和人机交互等技术，以可视交互界面为通道，将人感知和认知能力以可视的方式融入数据处理过程，形成人脑智能和机器智能优势互补和相互提升，建立螺旋式信息交流与知识提炼途径，完成有效的分析推理和决策。

科学可视化、信息可视化与可视分析学，这三者有一些重叠的目标和技术，这些领域之间的边界尚未有明确的共识。

二、数据可视化的目标

数据可视化的本质是将数据通过各种视觉通道映射成图形，可以使得用户更快、更准确的理解数据。因此数据可视化要解决的问题是如何将数据通过视觉可观测的方式表达出来，同时需要考虑美观、可理解性，需要解决在展示的空间（画布）有限的情况下覆盖、杂乱、冲突等问题，再以交互的形式查看数据的细节。

怎样进行数据可视化

用一张经典的图来说明如何进行数据可视化：
在这里插入图片描述

数据可视化过程可以分为下面几个步骤：

• 定义要解决问题
• 确定要展示的数据和数据结构
• 确定要展示的数据的维度（字段）
• 确定使用的图表类型
• 确定图表的交互

---

1、定义问题

首先明确数据可视化是要让用户看懂数据，理解数据。所以开始数据可视化前一定要定义通要解决的问题。例如：我想看过去两周销售额的变化，是增长了还是下跌了，什么原因导致的？
你可以从 趋势、对比、分布、流程、时序、空间、关联性等角度来定义自己要解决的问题。

2、确定要展示的数据

进行数据可视化首先要有数据，由于画布大小的限制，过量的数据不能够在直接显示出来，所以要确定展示的数据：

• 我要展示的数据是否已经加工好，是否存在空值？
• 是列表数据还是树形数据？
• 数据的规模有多大？
• 是否要对数据进行聚合，是否要分层展示数据？
• 如何加载到页面，是否需要在前端对数据处理？

3、确定要显示的数据维度

进行可视化时要对字段进行选择，选择不同的字段在后面环节中选择适合的图表类型也不同。

4、确定使用的图表类型

有非常多的图表类型可以使用，但是要根据要解决的问题、数据的结构、选择的数据维度来确定要显示的图表类型：

三、数据可视化的场景和工具

目前互联网公司通常有这么几大类的可视化需求：

• 通用报表
• 移动端图表
• 大屏可视化
• 图编辑&图分析
• 地理可视化

---

1、通用报表需求

开发过程中面临的 85% 以上的需求都是通用报表的需求，可以使用一般的图表库来满足日常的开发需求，行业内比较常用的图表库有：Highcharts、Echarts、amCharts 等。

2、移动端可视化

如果你面临的场景需要 PC 端和移动端都兼容那么使用 G2 然后适配移动端的屏幕即可，但是如果你在移动 APP 上使用 H5 或者小程序开发，那么就选择 F2

3、大屏可视化

大屏可视化聚焦于会议展览、业务监控、风险预警、地理信息分析等多种业务的展示，在图形渲染、可视化设计方面都有很高的要求。

4、图编辑 & 图分析

图可视化主要有两个大的领域：

• 图编辑：用于图建模（ER图、UML图）、流程图、脑图等，需要用户深入参与关系的创建、编辑和删除的场景
• 图分析：用于风控、安全、营销场景中的关系发现，对图的一些基本概念进行业务上解读，环、关键链路、连通量等。

目前主流的开源框架有：

• jointjs 聚焦于图编辑，包含了常见的流程图和BPMN 图的功能，上手容易，开箱即用但是二次开发非常困难。
• d3.js 非常底层的可视化库，有大量图分析场景的案例，上手成本高，demo 同业务的距离比较大。
• AntV 在图可视化方向开源了 图基础框架 G6

5、地理可视化

地理数据可视化主要是对空间数据域的可视化，主要有三大领域：

• 信息图：主要用于展示位置相关的报表，信息图，路径变化等等。
• 大屏应用：大屏展示一般以地理数据为载体，如建筑，道路，轨迹等数据可视化。
• 地理分析应用:这类应用往往是海量地理数据的交互分析，用户基于位置的用户推荐，拉新，促活等业务运营系统，或者选址，风险监控等系统。

总结

虽然有很多开源图表库，但绝大部分不是已经弃坑就是将要弃坑了，目前真正能用的就只有 ECharts、Ploty.js、Vega 和 G2。
Vega 背后是个学术组织，优点投入相对比较稳定，但缺点是可能更关注学术方面的发展，有些在业界里重要但没技术含量的东西就不怎么关心了，比如主题配色、动画、阴影、涟漪等花里胡哨的东西优先级一定最低，像动画功能在 2016 年就说要做了，而作者说的是有好多功能想做，动画这个先交给我的学生去研究了。所以 Vega 只推荐在内部使用，而对外产品还是需要点花里胡哨的。

Ploty.js 背后有家公司在专门做这个，发展一直比较稳定，不过作为商业公司，目前似乎主要靠卖另一个开源的 Dash 产品以及咨询服务，后续是否会对高级图表功能收费是个未知数。

ECharts 和 G2 虽然是在大的互联网企业里，但实际人力投入很难和专门做这个的商业公司比，G2 团队的情况我不太了解，相对来说 ECharts 的社区力量更大，靠用户贡献的例子远远多于其他图表库，一定程度上缓解了 API 太多的学习成本，而且 ECharts Issues 几乎都有回复，能做到这点的开源库没几个。

后续会不会出现更好的前端图表库？恐怕不会了，前面提到很多图表库的成功背后都赶上了技术变革，比如 FusionCharts/AnyChart 背后的 Flash、Highcharts 的 SVG/VML、ECharts 的 Canvas，技术栈的不同让它们一出来就有明显优势，所以如果没有新的技术变革，后续新出的图表库将很难超越，只能在特定领域突破，而目前能看到浏览器的下一次图形技术变革只有 WebGPU，虽然它不会像 WebGL2 那样命苦，但和 WebGL 相比，它的主要优势是减少在 CPU 上的时间，更好利用 GPU，这对后续游戏在浏览器上的表现更有利，但用来做图表和 WebGL 比没有明显优势，加上大部分图表是二维的，除非数据点非常多，否则并行渲染优势不大。

图表库商业产品不多，毕竟这个需求很通用，难以差异化竞争，对客户来说都是花钱，为啥不选最好那个？加上有 ECharts 这种赶上商业质量的开源库存在，能满足大部分的需求了，使得商业产品的生存空间有限。

如果选商业产品，国内使用最好在 Highcharts、amCharts 和 AnyChart 之间做选择，因为 FusionCharts 好像还不支持中文，不过需要注意这些产品的地图都有错误，把某个省当成国家了，用的时候需要改一下。