前端可視化的四種方式

簡(jiǎn)介:

可視化用一句話來說，本質(zhì)上就是將數(shù)據(jù)信息組織起來后，以圖形的方式進(jìn)行呈現(xiàn)。在web上，圖像通常是利用瀏覽器來進(jìn)行繪制的。大體的方向上有4種。

第一種是傳統(tǒng)的html+CSS，這種方式通常是普通網(wǎng)頁用來實(shí)現(xiàn)頁面的。

第二種是使用SVG繪制矢量圖。SVG和傳統(tǒng)的HTML+CSS的繪制方式差別不大，只不過，HTML在繪制矢量圖形方面的能力有些不足，而SVG恰好彌補(bǔ)了這方面的缺陷。

第三種則是Canvas2D。這是瀏覽器提供的Canvas API其中的一張上下文，使用它，我們可以非常方便的繪制出基礎(chǔ)的幾何圖形。在可視化中，canvas是非常常用的一種方法。

第四種則是WebGL。這是瀏覽器提供的canvas API的另外一種上下文，它是OpenGL ES規(guī)范在Web端的實(shí)現(xiàn)。我們可以通過它，用Gpu渲染各種復(fù)雜的2D和3D圖形。WebGL利用了GPU并行處理的特性，這讓他在處理大量數(shù)據(jù)展現(xiàn)的時(shí)候，性能要遠(yuǎn)遠(yuǎn)大于前面3種繪圖方式。因此，在可視化的應(yīng)用中，一些數(shù)據(jù)量大、視覺效果要求高的特殊場(chǎng)景，使用WebGL渲染是一種比較合適的選擇。

圖形系統(tǒng)表示顏色的幾種方式，以及他們的優(yōu)缺點(diǎn)。

在可視化中，圖形的形狀和顏色信息都非常重要。那么我們?cè)趙eb中都有哪些方法可以表示顏色。這里可以簡(jiǎn)單的劃分為4類分別是RGB、RGBA顏色表示法，HSL和HSV顏色表示法，CIE Lab 和Cie Lch顏色表示法以及CubeHelix色盤。

這里我們就對(duì)前面兩種方法來進(jìn)行一個(gè)詳細(xì)的講解，對(duì)后面兩種方法來一個(gè)簡(jiǎn)單介紹。

RGB和RGBA

RGB是顏色的16進(jìn)制表示，其中RR、GG、BB分別是兩位16進(jìn)制數(shù)字，表示紅綠藍(lán)三種通道的色階。色階可以表示某個(gè)通道的強(qiáng)弱。理論上一共能表示2^24，也就是16777216種不同的顏色。事實(shí)上RGB并不能表示肉眼所見的所有顏色，但實(shí)際上，它已經(jīng)非常豐富了。一般的顯示器、彩色打印機(jī)、掃描儀等都是支持它。而RGBA則是在他的基礎(chǔ)上添加了一個(gè)alpha的通道。

他的優(yōu)點(diǎn)就是使用起來非常的簡(jiǎn)單。但是它有一定的缺陷。

RGB表示顏色的時(shí)候，我們只能大致的判斷出他大概處于三種色階的位置，判斷它更偏向于哪種顏色，除此之外，我們就幾乎得不到其他任何有用的信息。

也就是說，我們?cè)谶x擇一組顏色給圖標(biāo)時(shí)，我們并不知道需要用到什么樣的規(guī)則來配置顏色，才能讓不同數(shù)據(jù)對(duì)應(yīng)的圖形顏色變得更鮮明。

HSL和HSV

與RGB顏色以色階表示顏色不同，HSL和HSV用色相（Hue）、飽和度（Saturation）和亮度（Lightness）或明度（Value）來表示顏色。其中Hue是角度，取值范圍是0-360，飽和度和亮度/明度的值都是從0-100%,實(shí)際上他是可以取值到-100%-0。以明度/亮度來說，當(dāng)我們的趨向于-100%時(shí)，圖片會(huì)逐漸變黑，而趨向于100%時(shí)，則會(huì)逐漸變白。rgb和HSL直接的轉(zhuǎn)換是非常復(fù)雜的，我們會(huì)在下一章，在深入的講解他們之間的轉(zhuǎn)換規(guī)則以及js實(shí)現(xiàn)方式。

CIE Lab 和 CIE Lch 顏色

CIE Lab 顏色空間簡(jiǎn)稱 Lab，它其實(shí)就是一種符合人類感覺的色彩空間，它用 L 表示亮度，a 和 b 表示顏色對(duì)立度。RGB 值也可以 Lab 轉(zhuǎn)換，但是轉(zhuǎn)換規(guī)則比較復(fù)雜。就不做描述，這是一種針對(duì)人類感覺的顏色描述方式。

Cubehelix 色盤

最后，我們?cè)賮碚f一種特殊的顏色表示法，Cubehelix 色盤（立方螺旋色盤）。簡(jiǎn)單來說，它的原理就是在 RGB 的立方中構(gòu)建一段螺旋線，讓色相隨著亮度增加螺旋變換。也不做過多描述。下一章我們主要講解RGB和HSL直接互相轉(zhuǎn)換的規(guī)則以及js的簡(jiǎn)單實(shí)現(xiàn)。