前端数据可视化方案

一、什么是数据可视化？

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

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

二、数据可视化的目标

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

三、数据可视化类型

1. 可视化库，比如 D3、Echarts 等，这些是面向开发者的，开发者可以基于这些库开发可视化应用。

2. 可视化平台，比如 Grafana、Superset 等，这些面向分析师和一般使用者，直接拿来分析数据，无需开发。

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

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

1. 通用报表

2. 移动端图表

3. 大屏可视化

4. 图编辑&图分析

5. 地理可视化

1. 通用报表需求

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

2. 移动端可视化

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

F2 是一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（node, 小程序，weex）。完备的图形语法理论，满足你的各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。

3. 大屏可视化

数据大屏是用可视化的方式展示庞杂数据的产品，经常会用在会议展览、业务监控、风险预警、地理信息分析等多种业务场景。下图是阿里云 DataV 的一个模板：

4. 图编辑 & 图分析

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

1. 图编辑：用于图建模（ER 图、UML 图）、流程图、脑图等，需要用户深入参与关系的创建、编辑和删除的场景

2. 图分析：用于风控、安全、营销场景中的关系发现，对图的一些基本概念进行业务上解读，环、关键链路、连通量等。

目前部分主流的开源框架有：

• jointjs 聚焦于图编辑，包含了常见的流程图和 BPMN 图的功能，上手容易，开箱即用但是二次开发非常困难。

• d3.js 非常底层的可视化库，有大量图分析场景的案例，上手成本高，demo 同业务的距离比较大。

目前 AntV 在图可视化方向开源了图基础框架 G6：

5. 地理可视化

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

1. 信息图：主要用于展示位置相关的报表，信息图，路径变化等等。

2. 大屏应用：大屏展示一般以地理数据为载体，如建筑，道路，轨迹等数据可视化。

3. 地理分析应用:这类应用往往是海量地理数据的交互分析，用户基于位置的用户推荐，拉新，促活等业务运营系统，或者选址，风险监控等系统。

AntV G2 和 L7 都提供了地理数据可视化的方案，其中：

• G2 提供通用地理数据图表的支持。

• L7 是更加专业的地理数据可视化解决方案，采用 WebGL 渲染技术，支持海量地理数据可视化分析，支持多线程运算的矢量瓦片方案。能够满足大屏可视化地理分析应用的需求。

阿里集团的其他地理可视化框架包括：

• 高德的 Loca

• 菜鸟的 鸟图

五、基础开发技术

1、SVG

SVG是一种XML语言，类似XHTML，可以用来绘制矢量图形。SVG可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。

<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="red" /> <circle cx="150" cy="100" r="80" fill="green" /> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text> </svg> 

绘制了一个矩形（rect标签）、圆圈（circle标签）和文字（text标签）。一般如果画布比较大，有缩放、平移等高频的交互的场景，常见的饼图、柱状图、流程图之类的开发，可以考虑使用 SVG 。关于SVG的具体使用教程可以移步文档：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial

2、Canvas

Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等领域。

Canvas绘制的图形不会出现在DOM结构中，一般小画布、大数据量的场景适合用Canvas，性能更好。
以下是一个简单例子：
HTML部分:

<canvas id="canvas"></canvas> 

JavaScript代码部分：

const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'green'; ctx.fillRect(10, 10, 150, 100); 

关于Canvas的具体使用教程可以移步文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial

3、WebGL

WebGL 使得在支持HTML 的 canvas 标签的浏览器中，不需要安装任何插件，便可以使用基于 OpenGL ES 2.0 的 API 在 canvas 中进行2D和3D渲染。如果您有一些3D绘制的需求，可以采用webGL方案。尤其是3d地图、3d地球等绘制都需要用到webGL技术。

webGL是基于Canvas的绘图技术。要使用webGL进行3D渲染，首先得在页面中创建一个canvas元素，通过这个canvas元素来初始化WebGL上下文。其中细节大家可以移步文档使用学习：https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Tutorial

六、可视化组件和工具

	地址	特点	优点
Echarts(百度-图表库)	https://echarts.apache.org/zh/index.html	1、完全免费，代码开源。 2、基于Canvas，(ECharts v3.8 发布了 SVG 渲染器)适用于数据量比较大的情况。 3、兼容 IE6 及以上的所有主流浏览器，同样支持移动端的缩放和手势操作。入手简单，文档清晰，效果绚丽，主要是国产，文档也很容易看。 4、支持按需求打包,可以在线构建项目时，选择项目所需要使用到的模块，从而达到减小JS文件的体积 echarts 的体积较大。 5、对于大数据的处理能力非常的好，而且前端数据可视化图形的展现也比较美观，它是一个纯Javascript图表库，可以流畅的运行在PC端和移动端上，里面包含着柱状图、折线图、饼图、散点图、雷达图、地图等多种图形 6、除了2D图表，echarts也提供了Echarts-gl，它能实现对三维图表和地球的展示，这点其他开源库基本没有。虽然2D图也可以实现仿三维效果，但只有 Echarts-gl 是基于 WebGL 做的真三维，可以配置光照、材质、阴影，还有独家的后期特效等功能	相对来说 ECharts 的社区力量更大，靠用户贡献的例子远远多于其他图表库，一定程度上缓解了 API 太多的学习成本，而且 Echarts 的 Issues 几乎都有回复
AntV(蚂蚁-数据可视化项目)	https://antv.antgroup.com/	目前覆盖了统计图表、移动端图表、图可视化、地理可视化、2D 绘图引擎和智能可视化等多个领域，主要包含 G2栈、F2栈、G6栈、X6栈、L7栈、AVA 以及一套完整的图表使用和设计规范。
G2(图表库)	https://g2.antv.antgroup.com/	上手成本高于Echarts，比起 Echarts 之类的图表库，G2 的定位更接近 Vega，也就是比直接拿来用的图表库低一层
D3(函数库)	https://d3js.org/	1、完全免费，代码开源。 2、D3.js实际是一个JavaScript函数库，不是图表库，比较适合于做数据可视化 3、有丰富的数学函数处理数据转换和物理计算，可以把数据和 HTML 结构或者 SVG 文档对应起来，这种特性让我们可以更方便的操作DOM绘制图表。它可以说是 “可视化界的jQuery”，因为D3的api和jQuery非常类似（直接对DOM进行操作） 4、D3.v3 基于SVG，方便自己定制；D3.v4支持Canvas+SVG，如果计算比较密集，也可以选择用Canvas。除此之外，D3图表类型非常丰富，几乎可以满足所有开发需求 5、兼容IE9 及以上的所有主流浏览器，对于移动端的兼容性也同上。
amCharts(商用免费)	xx	xx	xx
Highcharts(商用付费)	xx	1、非商业免费，商业需授权，代码开源。 2、基于SVG，方便自己定制，但图表类型有限。 3、兼容 IE6 及以上的所有主流浏览器，完美支持移动端缩放、手势操作。	xx

关于D3

可视化界的 jQuery，前端可视化最著名的项目是 D3，它不仅能做出各种可视化效果，还是许多其它图表库的基础，它的目的并不是做图表库，而是成为更底层的基础设施，简化数据可视化的开发，它在 API 设计方面参考了 jQuery，使用比如这样的写法 d3.selectAll("p").attr("class", "graf")，把 d3.selectAll 改成 $ 就和 jQuery 一样了。

除了类似 jQuery 的链式调用，D3 还有鲜明的特点是将功能拆得非常细，做到了函数级别，从数据解析、转换到布局算法都有提供，这使得开发者可以十分灵活地进行组合，实现各种可视化的展现，这使得 D3 非常适合拿来学习的可视化算法，而且还能很方便地将这些算法整合到自己的项目中。

D3 的链式调用可以让代码变得很少，取代 for 循环，比如下面这样的代码：

d3.select("body")
  .selectAll("p")
  .data([4, 8, 15, 16, 23, 42])
  .enter()
  .append("p")
  .text(function (d) {
    return "I’m number " + d + "!";
  });

如果只是想绘制常见图表，倒是没必要直接用 D3，可以看看那些基于 D3 的图表库

七、常见的问题

1. 图表误用

图表的误用是最常见的问题，看下下面的一些场景：

例子 1：分类过多的场景。下图是各个省的人口的占比情况，因为这张图上包含的分类过多，就出现了简介中提到的问题，很难清晰对比各个省份的人口数据占比情况，所以这种情况下，我们推荐使用横向柱状图。

例子 2：我们以一个不同游戏类型的销量对比的场景为例，对于表示分类对比的数据时，我们更应该使用柱状图，而不是折线图。

2. 移动端和 PC 端图表

AntV 提供了 G2 和 F2 两个统计图表框架，用户经常会面同时临移动端和 PC 端的业务，这时候会面临两个框架的选择问题。G2 本质上是为了传统的中后台产品设计的图表库，除了一般的报表显示外，还提供了大量的交互有很强的分析能力；而 F2 则专门为移动端开发，最关注的是代码大小、性能、表现力。

所以我们有以下建议：

1. 如果你的用户主要来自 PC 端，那么请使用 G2 ，G2 能支持更多的图表类型和交互。

2. 如果你在钱包等重型 app 上使用 H5、小程序开发，请使用 F2。我们对移动端的众多平台做了大量兼容性工作。

3. 如果你开发的是一个 BI 分析系统，除了报表功能外还需要一定的分析能力请使用 G2。

4. 如果你在开发监控等需要联动系统，主要的用户来自 PC 端则使用 G2。

5. 如果你开发的是报表系统，主要的用户通过移动端来看图表，那么请使用 F2（PC 端也可以看）。

3. 数据量太大怎么办

我们在前端做的可视化，能做的仅仅是小规模数据的可视化，如果你遇到超大规模数据要进行可视化，那么可以选择：

• 数据分层

• 数据聚合

• 数据抽样