前端 er 必须掌握的数据可视化技术

[GrapeCityChina]

又是一月结束，打工人准时准点的汇报工作如期和大家见面啦。提到汇报，必不可少的一部分就是数据的汇总、分析。

作为一名合格的社会人，我们每天都在工作、生活、学习中和数字打交道。小到量化的工作内容，大到具体的工作指标，车间生产、批发零售各行各业都充斥着大量数据。在互联网诞生之后，网络把我们紧紧相连，也让数据更为密集地汇聚。 扯远了……当前，正在写月报的葡萄面对的是，后端发来铺天盖地的两万条数据。

这个数据能用吗？ 能用，但不是完全能用。 毕竟做报告的时候，我们不能把两万条数据直接甩到领导的脸上，让他自己想办法看看。 这时万一领导说，看看哪个省销量最多，我们岂不是就当场就抓瞎了。 但是如果变成这样一张图：

就可以清晰明了地看出各个省份之间的销量差距了。 拿着这张图，我们就可以秒回领导：浙江省、天津市、江西省位居销量前三。 而领导也可以满意地拿着这张图向他的领导汇报。 这样一个数据处理的过程，就叫做“数据可视化”，使我们能够对数据进行加工和处理。 而对于一个优秀的前端而言，我们更加关注如何实现数据可视化。这里面涉及的知识领域其实很多，包括数据源整合、数据抽取、数据清洗、数据建模、数据可视化展示等等内容。 本篇文章主要为大家介绍下在前端领域，作为前端开发的我们需要掌握哪些可视化技术，来帮助我们更好地实现数据可视化展示。

一、基础开发技术

1 、SVG

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

以下是 MDN 上的一个例子：

<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

二、可视化组件和工具

1 、ZRender

ZRender 是一个轻量级的 Canvas 类库，是一个二维绘图引擎，它提供 Canvas 、SVG 、VML 多种渲染方式，并提供类 Dom 事件模型。同时，ZRender 也是 ECharts 的渲染器。 使用 ZRender 并不复杂，我们需要引入相应的 JavaScript 文件，利用其所提供的 API 初始化一个 Dom 容器，在这个容器里绘制您所需要的图形。以下是一个简单例子，创建了一个圆心在[150 ，50]，半径为 40 的圆：

var circle = new zrender.Circle({ shape: { cx: 150, cy: 50, r: 40 }, style: { fill: 'none', stroke: '#F00' } }); zr.add(circle); 

关于更多图形的画法可以参考 ZRender 的官方文档 https://ecomfe.github.io/zrender-doc/public/ 在此不再赘述。

2 、Echarts

如果需要做可视化方面的工作，那么你对 Echarts 一定不陌生。Echarts 是百度开源的一个 javaScript 可视化图库，可以流畅地在 PC 和移动设备上运行，兼容当前绝大部分浏览器，底层依赖矢量图形库 ZRender ，提供直观、交互丰富、可高度个性化定制的数据可视化图表。同时，Echarts 的学习和使用也相对容易，通过几个简单的 option 配置项就可以很快地绘制出一个图表出来。比如一个折线图，只需要十来行配置搞定：

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line' } ] }; 

除了 2D 图表，echarts 也提供了 Echarts-gl ，它能实现对三维图表和地球的展示，这点其他开源库基本没有。虽然 2D 图也可以实现仿三维效果，但只有 Echarts-gl 是基于 WebGL 做的真三维，可以配置光照、材质、阴影，还有独家的后期特效等功能。 关于 Echarts 的更多配置使用可以移步 Echarts 文档： https://echarts.apache.org/zh/option.html#title

除了 Echarts 官方提供的资源外，Echarts 的资源社区 Gallery 才是真正的主力军。这个社区上有非常丰富的图表资源，都是用户个人上传的，还可以进行筛选查询，这些图表基本上可以满足绝大多数应用场景。

3 、AntV

AntV 是一个数据可视化项目，也是一个团队，即蚂蚁集团的数据可视化团队。AntV 目前覆盖了统计图表、移动端图表、图可视化、地理可视化、2D 绘图引擎和智能可视化等多个领域，主要包含 G2 栈、F2 栈、G6 栈、X6 栈、L7 栈、AVA 以及一套完整的图表使用和设计规范。

其中 G2 主要致力于通用图表库，用更简化的语法构建出各种各样的可交互统计图表。F2 是一个专注于移动、开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（ node, 小程序，weex 等）。L7 是一个基于 WebGL 的开源大规模地理空间数据可视分析开发框架。关于 AntV 的各类图表使用，大家可以去官网自行查询： https://antv.vision/zh

4 、Wyn Enterprise

Wyn Enterprise 是一款强大的嵌入式数据可视化工具，提供了灵活的数据交互和探索分析能力，以及 OEM 白标集成的方式，全面满足行业应用软件的数据分析需求。它具备多源数据整合、报表设计、数据可视化、自助式 BI 分析、以及数据填报等功能，帮助用户挖掘数据的潜在价值，为管理者制定决策提供数据支撑。

https://www.grapecity.com.cn/solutions/wyn

5 、D3

D3.js 库是一个开源项目，作者是纽约时报的工程师。准确来说，D3.js 实际是一个 JavaScript 函数库，不是图表库，比较适合于做数据可视化。D3 有丰富的数学函数处理数据转换和物理计算，可以把数据和 HTML 结构或者 SVG 文档对应起来，这种特性让我们可以更方便的操作 DOM 绘制图表。它可以说是 “可视化界的 jQuery”，因为 D3 的 api 和 jQuery 非常类似，可以看以下的例子：

d3.select('#chart') .selectAll("div") .data([4, 16, 23, 42]) .enter() .append("div") .style("height", (d)=> d + "px") 

如果只是想绘制常见图表，倒是没必要直接用 D3 ，可以看看那些基于 D3 的图表库，比如 Ploty.js 、nivo 等。这里贴出 d3 的 GitHub 项目地址： https://github.com/d3/d3

6 、Vega

使用 Vega 不需要写前端代码，它做到了只需要 JSON 就能完成所有图表相关的开发，包括数据的加载、转换、交互等。由于 Vega 致力于通过一些 JSON 配置项实现图表的绘制，导致在生成一些基础简单的图表时，也需要很多行的配置。比如最简单的柱状图就需要 95 行配置，所以它提供了更简明的语法 Vega-Lite ，用于快速生成可视化以支持分析。以下是一个柱状图的示例：

这里给大家贴出 vega-lite 的官网供大家学习： https://vega.github.io/vega-lite/

三、结语

到这里给大家介绍了几种比较热门的可视化技术或图库，以上介绍的都是可以免费使用的，当然市面上也有一些商业图表库，比如 HighCharts 、AnyChart 、Wyn Enterprise 、FusionCharts 等，大家有兴趣可以自行了解下。