又到了八月，工人们会准时见到你，准时汇报工作。在报告方面，不可或缺的部分是数据的汇总和分析。
作为合格的社会人，我们在工作、生活和学习中每天晚上都与数字打交道。从量化工作内容到具体工作指标，车间生产、批发、零售混杂着大量数据。互联网诞生后，互联网将我们紧密相连，使数据更加密集。
拉开...目前，正在撰写月报的蓝莓面临着后端发送的2万条数据。
这些数据有效吗？有效
，但不完全有效。
毕竟在做报告的时候，我们不能直接把2万条数据扔给领导，让他自己想办法看。
这个时候，如果领导说，看看销量最大的省份，岂不是就当场瞎了。
但是如果你拍一张这样的图片：
各省之间的销售差异可以清楚地看到。
有了这张图，我们可以秒回到领跑者：浙江省、天津市、江西省跻身销量前三。
而领导也可以把这张照片拍下来，满意地向领导汇报。
这样的数据处理过程称为“数据可视化”，这样我们就可以处理和处理数据。
对于一个好的后端，我们越来越关注如何可视化数据。虽然涉及的知识领域很多，包括数据源集成、数据提取、数据清洗、数据建模、数据可视化等。
本文主要向您介绍作为后端开发人员在后端领域需要掌握哪些可视化技术，以帮助我们更好地实现数据可视化和展示。
1. 基础开发技术
1、SVG
SVG是一种XML语言，类似于XHTML，可用于绘制矢量图形。SVG 可以通过定义必要的线条和形状、更改现有位图或组合这两种方法来创建图形来创建图形。
以下是 MDN 上的一个例子：
一个圆圈 （
绘制矩形标签）、圆形（圆形标签）和文本（文本标签）。一般来说，如果画布比较大，并且有缩放和平移等高频交互场景，常见的饼图，条形图，流程图等开发，则可以考虑使用SVG。
2、帆布
Canvas API 提供了一种通过 JavaScript 和 HTML 元素绘制图形的方法。可用于动画、游戏图形、数据可视化、图片编辑、实时视频处理等。
Canvas
勾勒出的图形不会出现在 DOM 结构中，Canvas 一般适用于画布小、数据量大的场景，性能更好。
下面是一个简单的示例：
网页部分：
JavaScript 代码部分：
const canvas = document.getElementById（'canvas'）; const ctx = canvas.getContext（'2d'）; ctx.fillStyle = 'green'; ctx.fillRect（10，10jquery 图表， 150， 100）;
3、网络GL
WebGL使得在支持HTML画布标签的浏览器中使用基于OpenGL ES 2.0的API在画布中进行2D和3D渲染成为可能。如果您对3D草图有一些需求，可以使用webGL解决方案。特别是3D地图，3D地球和其他草图需要使用webGL技术。
webGL是一种基于画布的绘图技术。要使用 webGL 进行 3D 渲染，您首先必须在初始化 WebGL 上下文的页面中创建一个画布元素。
2. 可视化组件和工具
1、泽德
ZRender 是一个轻量级的 Canvas 泛型，一个二维绘图引擎，它为 Canvas、SVG、VML 提供了多种渲染方法，并提供了一个类似 Dom 的事件模型。ZRender 也是 ECharts 的渲染器。使用
ZRender 并不复杂，我们需要引入相应的 JavaScript 文件，使用提供的 API 初始化一个 Dom 容器，并在这个容器中绘制出你需要的图形。下面是创建中心为 [150，50] 且半径为 40 的圆的简单示例：
var circle = new zrender。圆形（{ 形状： { cx： 150jquery 图表， cy： 50， r： 40 }， 样式： { 填充： '无'， 笔划： '#F00' } }）;zr.add（circle）;
2、电子图表
如果您需要进行可视化，那么Echarts对您来说并不陌生。Echarts是百度开源的javaScript可视化库，可以在PC和联通设备上流畅运行，兼容目前大多数浏览器，并依靠矢量图形库ZRender提供直观，交互式和高度可定制的数据可视化图表。同时，Echarts相对容易学习和使用，通过几个简单的选项配置项可以快速勾勒出一个图表。例如，折线图只需要配置十行：选项 = { xAxis： { 类型： '类别'， 数据： ['周一'， '周二'， '周三'， '周四'， '周五'， '周六'， '周日'] }， y轴： { 类型： ' 值' }， 系列： [
{ 数据： [150， 230， 224， 218， 135， 147， 260]， 类型： '行' } ] };
除了2D图表，echarts还提供Echarts-gl，它可以显示3D图表和月亮，这是其他开源库中基本上没有的。虽然2D图像也可以实现3D效果，但只有Echarts-gl是基于WebGL的真正3D，它可以配置照明，材质，阴影和独家后期效果。
除了Echarts提供的官方资源外，Echarts的资源社区Gallery才是真正的主力。这个社区拥有丰富的图表资源，全部由用户亲自上传，也可以过滤查询，这些图表基本可以满足绝大多数的应用场景。
3、蚂蚁
AntV是一个数据可视化项目和一个团队，蚂蚁集团的数据可视化团队。AntV目前涵盖统计图表、移动图表、图形可视化、地理可视化、2D绘图引擎和智能可视化等领域，主要包括G2堆栈、F2堆栈、G6堆栈、X6堆栈、L7堆栈、AVA等一整套图表使用和设计规范。
其中，G2主要致力于通用图表库，使用更简化的句型构建各种交互式统计图表。F2 是一种以连接为重点的开箱即用可视化解决方案，完美支持 H5 环境，并与多个环境（节点、小程序、weex 等）兼容。L7是基于WebGL的开源大规模地理空间数据可视化剖析开发框架。关于AntV各种图表的使用，可以去官网自行查看：
4、永利企业
Wyn Enterprise是一款功能强大的嵌入式数据可视化工具，提供灵活的数据交互和探测能力，以及OEM白标集成，以满足行业应用软件的数据剖析需求。具有多源数据集成、报表设计、数据可视化、自助BI分析、数据补充报表等功能，帮助用户挖掘数据的潜在价值，为管理者决策提供数据支持。
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 等。
6、织女星
使用 Vega 不需要编写后端代码，只需要 JSON 即可完成所有图表相关的开发，包括数据加载、转换、交互等。由于 Vega 致力于通过一些 JSON 配置项来勾勒图表，因此在生成一些基本的简单图表时也需要多行配置。例如，最简单的直方图需要 95 行配置，因此它提供了更简洁的句型 Vega-Lite，用于快速生成可视化以支持分析。以下是条形图的示例：
三、结语
我已经向大家介绍了几种流行的可视化技术或库，都可以免费使用，当然，市场上也有一些商业图表库，如HighCharts，AnyChart，Wyn Enterprise，FusionCharts等，您可以自己了解一下。
参考资料正文内容 Ajax操作之jQuery学习笔记（一）——数据加载
加载 HTML
我们一般采用加载HTML的方式来加载HTML片段并将其插入到指定位置，假设当前页面是：
同目录下的test.html文件内容为：
test
我们可以使用 load 方法加载 HTML 并将其绑定到按钮单击事件：
$('button').click(function() {
$('div').load('test.html');
});
单击按钮后：
加载 JSON
JSON是Javascript Object Notation，直译为Javascript Object Notation，因此它可以方便地表示和传输数据，它规定键和值都必须包含在双引号中，函数是非法的JSON值。
{
"name": "stephenlee",
"sex": "male"
}
将上述 JSON 数据保存在 test.json 文件中。 我们可以使用 getJSON 方法加载 JSON 数据，并将其绑定到按钮单击事件：
$('button').click(function() {
$.getJSON('test.json');
});
因为 getJSON 方法被定义为 jQuery 的全局对象，所以这里需要使用 $ 来调用该技术。 这里的 $ 指的是全局 jQuery 对象，而不是 $() 引用的某个 jQuery 对象。 因此我们将 getJSON 函数称为全局函数。
但是我们会发现上面的代码只获取到了JSON数据，却看不到任何疗效。 这里我们可以使用getJSON方法的第二个参数作为回调函数来测试疗效：
$('button').click(function() {
$.getJSON('test.json', function(data) {
console.log(data);
$.each(data, function(index, content) {
console.log(content);
})
});
});
单击按钮后，我们看一下控制台中的输出：
这里的each函数的第一个参数可以接收一个链表或对象，第二个参数是一个值回调函数，它以每次循环中链表或对象的当前索引和值作为参数。
加载js
有时我们不想在页面第一次加载时就加载所有的JS文件，而是根据需求动态加载。 假设当前目录下有一个JS文件jquery加载，内容是一个简单的alert：
$(function() {
alert('test');//
})
我们可以使用全局函数 getScript 加载此文件，该函数也绑定到按钮单击事件：
$('button').click(function() {
$.getScript('test.js');
});
点击按钮后，test.js文件被加载，警报成功触发。
加载 XML
XML的加载操作与JSON类似jquery加载，因为XML文档的作用也与数据存储有关。 在同一目录中创建一个包含以下内容的 text.xml 文件：
stephenlee male
可以直接使用get方法来加载XML文档，为什么看起来像是默认方法，这个根据AJAX的全称——Asynchronous JavaScript And XML就可以看出。
还将其绑定到按钮单击事件：
$('button').click(function() {
$.get('test.xml', function(data) {
console.log(data);
});
});
检查控制台，结果是：
这里需要注意的是，如果XML文档中的格式错误，虽然不会报错，但是回调函数执行起来会比较困难。
发表评论