前端数据可视化技术

1、SVG

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

以下是MDN上的一个例子:

version
1
2
3
4
            <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 。

2、Canvas

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

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

<canvas id="canvas"></canvas>

JavaScript代码部分:

1
2
3
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 教程