可视化图表实现揭秘 |
您所在的位置：网站首页 › 数据转化成图表 › 可视化图表实现揭秘 |
可视化图表实现揭秘
|
职业规划 高级前端 可视化低代码1. 介绍1.1 什么是数据可视化？ 可视化是利用计算机图形学和图像处理技术，将数据转换成图形或者图像在屏幕上显示出来，再进行交互处理的理论、方法和技术。 数据可视化并不是简单的将数据变成图表，而是以数据为视角，看待世界。数据可视化就是将抽象概念形象化表达，将抽象语言具体化的过程。 1.2 为什么要用数据可视化首先我们利用视觉获取的信息量绝对远远的比别的感官要多得多。它能帮助分析的人对数据有更全面的认识，下面举个????我们看下面几组数据：
对数据进行简单的数据分析，每组数据都有两个变量 X 和 Y，然后用常用的统计算法评估其特点。 Means（平均值）：X = 9Y = 7.5Variance（总体方差）：X = 11Y = 4.122Line regression（线性回归方程）：Y = 3.0 + 0.5X猛一看，你会觉得数据都是同一个特点。但如果通过可视化方式展示出来，就会有不同效果
对于在 Data 部门或者做跟数据相关工作的同学，一定对可视化不陌生，常见的场景有大屏、3D 展示等等。同样，现阶段前端层面涌现出多种可视化方案，这里简单罗列几种： Echarts，可以流畅的运行在 PC 和移动设备，且兼容绝大部分浏览器（IE 8/9/10），底层使用 ZRender 作为渲染引擎，提供直观、交互丰富、可高度个性化定制的数据图表。Antv，是蚂蚁金服新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。其包括 G（可视化引擎）、G2（可视化图表）、G6（图可视化引擎）、F2（移动可视化方案）、L7（地理空间数据可视化）。D3，其实一个可以基于数据来操作文档的 JavaScript 库，其遵循现有 Web 标准，可以不需要其他任何框架运行在现代浏览器中。1.4 前端可视化图表是怎么绘制出来的这里我们只简单介绍 2D 的绘制方案。 Canvas。其基于位图的图像。其使用 JavaScript 程序绘图（动态生成），提供的功能更原始，适合图像处理、动态渲染以及大数据量绘制。优点如下：性能高，可以自己控制绘制过程。可控性高（像素级别）。内存占用恒定（与像素点个数有关）。Svg。其基于矢量的图像。适合用来做动态生成，且容易编辑。不失真，放大缩小都清晰。学习成本低，其也是一种 DOM 结构。使用方便，设计软件即可导出（icon 就是这样实现的）。
听了上面的介绍，似乎感觉对可视化有了一定的了解，但它到底是怎么绘制出来的以及交互是怎么做的呢？ 2. 如何实现绘图（Canvas 版本）先不要着急，在介绍如何绘图之前，我们先来了解几个专业名词： 包围盒。包围盒是一种求解离散点集最优包围空间的算法，基本思想是用体积稍大且特性简单的几何体（称为包围盒）来近似地代替复杂的几何对象，常见的包围盒算法有 AABB 包围盒、包围球以及固定方向凸包 FDH。包围盒算法是进行碰撞干涉初步检测的重要方法。贝塞尔曲线，是应用于二维图形应用程序的数学曲线。其由线段和节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，它的计算参数公式为
|
【本文地址】