又是一月完结，打工人准时准点的汇报工作如期和大家见面啦。提到汇报，必不可少的一部分就是数据的汇总、剖析。
作为一名合格的社会人，咱们每天都在工作、生存、学习中和数字打交道。小到量化的工作内容，大到具体的工作指标，车间生产、零售批发各行各业都充斥着大量数据。在互联网诞生之后，网络把咱们紧紧相连，也让数据更为密集地汇聚。
扯远了……以后，正在写月报的葡萄面对的是，后端发来铺天盖地的两万条数据。
这个数据能用吗？
能用，但不是齐全能用。
毕竟做报告的时候，咱们不能把两万条数据间接甩到领导的脸上，让他本人想方法看看。
这时万一领导说，看看哪个省销量最多，咱们岂不是就当场就抓瞎了。
然而如果变成这样一张图：
就能够清晰明了地看出各个省份之间的销量差距了。
拿着这张图，咱们就能够秒回领导：浙江省、天津市、江西省位居销量前三。
而领导也能够称心地拿着这张图向他的领导汇报。
这样一个数据处理的过程，就叫做“数据可视化”，使咱们可能对数据进行加工和解决。
而对于一个优良的前端而言，咱们更加关注如何实现数据可视化。这外面波及的常识畛域其实很多，包含数据源整合、数据抽取、数据荡涤、数据建模、数据可视化展现等等内容。
本篇文章次要为大家介绍下在前端畛域，作为前端开发的咱们须要把握哪些可视化技术，来帮忙咱们更好地实现数据可视化展现。
一、根底开发技术
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…
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…
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…
二、可视化组件和工具
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/zren…
在此不再赘述。
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…
除了 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/…
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-l…
三、结语
到这里给大家介绍了几种比拟热门的可视化技术或图库，以上介绍的都是能够收费应用的，当然市面上也有一些商业图表库，比方 HighCharts、AnyChart、Wyn Enterprise、FusionCharts 等，大家有趣味能够自行理解下。