前端数据可视化技术

1、SVG

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

image.png

以下是MDN上的一个例子：

            
            
           SVG 

绘制了一个矩形（rect标签）、圆圈（circle标签）和文字（text标签）。一般如果画布比较大，有缩放、平移等高频的交互的场景，常见的饼图、柱状图、流程图之类的开发，可以考虑使用 SVG 。

2、Canvas

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

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

JavaScript代码部分：

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

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上下文。WebGL 教程