前端可视化的四种方式

简介:

可视化用一句话来说，本质上就是将数据信息组织起来后，以图形的方式进行呈现。在web上，图像通常是利用浏览器来进行绘制的。大体的方向上有4种。

第一种是传统的html+CSS，这种方式通常是普通网页用来实现页面的。

第二种是使用SVG绘制矢量图。SVG和传统的HTML+CSS的绘制方式差别不大，只不过，HTML在绘制矢量图形方面的能力有些不足，而SVG恰好弥补了这方面的缺陷。

第三种则是Canvas2D。这是浏览器提供的Canvas API其中的一张上下文，使用它，我们可以非常方便的绘制出基础的几何图形。在可视化中，canvas是非常常用的一种方法。

第四种则是WebGL。这是浏览器提供的canvas API的另外一种上下文，它是OpenGL ES规范在Web端的实现。我们可以通过它，用Gpu渲染各种复杂的2D和3D图形。WebGL利用了GPU并行处理的特性，这让他在处理大量数据展现的时候，性能要远远大于前面3种绘图方式。因此，在可视化的应用中，一些数据量大、视觉效果要求高的特殊场景，使用WebGL渲染是一种比较合适的选择。

图形系统表示颜色的几种方式，以及他们的优缺点。

在可视化中，图形的形状和颜色信息都非常重要。那么我们在web中都有哪些方法可以表示颜色。这里可以简单的划分为4类分别是RGB、RGBA颜色表示法，HSL和HSV颜色表示法，CIE Lab 和Cie Lch颜色表示法以及CubeHelix色盘。

这里我们就对前面两种方法来进行一个详细的讲解，对后面两种方法来一个简单介绍。

RGB和RGBA

RGB是颜色的16进制表示，其中RR、GG、BB分别是两位16进制数字，表示红绿蓝三种通道的色阶。色阶可以表示某个通道的强弱。理论上一共能表示2^24，也就是16777216种不同的颜色。事实上RGB并不能表示肉眼所见的所有颜色，但实际上，它已经非常丰富了。一般的显示器、彩色打印机、扫描仪等都是支持它。而RGBA则是在他的基础上添加了一个alpha的通道。

他的优点就是使用起来非常的简单。但是它有一定的缺陷。

RGB表示颜色的时候，我们只能大致的判断出他大概处于三种色阶的位置，判断它更偏向于哪种颜色，除此之外，我们就几乎得不到其他任何有用的信息。

也就是说，我们在选择一组颜色给图标时，我们并不知道需要用到什么样的规则来配置颜色，才能让不同数据对应的图形颜色变得更鲜明。

HSL和HSV

与RGB颜色以色阶表示颜色不同，HSL和HSV用色相（Hue）、饱和度（Saturation）和亮度（Lightness）或明度（Value）来表示颜色。其中Hue是角度，取值范围是0-360，饱和度和亮度/明度的值都是从0-100%,实际上他是可以取值到-100%-0。以明度/亮度来说，当我们的趋向于-100%时，图片会逐渐变黑，而趋向于100%时，则会逐渐变白。rgb和HSL直接的转换是非常复杂的，我们会在下一章，在深入的讲解他们之间的转换规则以及js实现方式。

CIE Lab 和 CIE Lch 颜色

CIE Lab 颜色空间简称 Lab，它其实就是一种符合人类感觉的色彩空间，它用 L 表示亮度，a 和 b 表示颜色对立度。RGB 值也可以 Lab 转换，但是转换规则比较复杂。就不做描述，这是一种针对人类感觉的颜色描述方式。

Cubehelix 色盘

最后，我们再来说一种特殊的颜色表示法，Cubehelix 色盘（立方螺旋色盘）。简单来说，它的原理就是在 RGB 的立方中构建一段螺旋线，让色相随着亮度增加螺旋变换。也不做过多描述。下一章我们主要讲解RGB和HSL直接互相转换的规则以及js的简单实现。