數(shù)據(jù)可視化：淺談熱力圖如何在前端實(shí)現(xiàn)

當(dāng)我們需要用更直觀有效的形式來(lái)展現(xiàn)各類(lèi)大數(shù)據(jù)信息時(shí)，熱力圖無(wú)疑是一種很好的方式。作為一種密度圖，熱力圖一般使用具備顯著顏色差異的方式來(lái)呈現(xiàn)數(shù)據(jù)效果，熱力圖中亮色一般代表事件發(fā)生頻率較高或事物分布密度較大，暗色則反之。值得一提的是，熱力圖最終效果常常優(yōu)于離散點(diǎn)的直接顯示，可以在二維平面或者地圖上直觀地展現(xiàn)空間數(shù)據(jù)的疏密程度或頻率高低。
那么制作一張完整的熱力圖，需要前端做哪些工作呢？接下來(lái)，我將基于自己在工作過(guò)程中的實(shí)踐，為大家詳細(xì)解析熱力圖在前端的實(shí)現(xiàn)過(guò)程。
首先給大家看一張完整的熱力圖實(shí)現(xiàn)效果圖：

關(guān)于熱力圖的實(shí)現(xiàn)原理：
一般可大致歸納為以下幾個(gè)步驟：
1.為每個(gè)數(shù)據(jù)點(diǎn)設(shè)置一個(gè)從中心向外灰度漸變的圓；
2.利用灰度可以疊加的原理，計(jì)算每個(gè)像素點(diǎn)數(shù)據(jù)交叉疊加得到的灰度值；
3.根據(jù)每個(gè)像素計(jì)算得到的灰度值，在一條彩×××帶中進(jìn)行顏色映射，最后對(duì)圖像進(jìn)行著色，得到熱力圖。
當(dāng)熱力圖基于前端技術(shù)的具體實(shí)現(xiàn)時(shí)，又可分為以下四個(gè)步驟，接下來(lái)為大家詳細(xì)解析：
1.準(zhǔn)備熱力圖數(shù)據(jù)格式
由于熱力圖使用場(chǎng)景一般為地圖，所以，數(shù)據(jù)源需要提供經(jīng)緯度作為位置信息，以及count作為數(shù)據(jù)點(diǎn)的權(quán)重值。具體數(shù)據(jù)格式示例如下：

2.在地圖上填充數(shù)據(jù)
基于canvas繪制熱力圖時(shí)，熱力圖中每個(gè)數(shù)據(jù)點(diǎn)的半徑大小會(huì)直接影響到熱力圖的展現(xiàn)效果，所以一般要結(jié)合使用地圖的縮放級(jí)別以及數(shù)據(jù)精度來(lái)進(jìn)行設(shè)置，本文示例默認(rèn)設(shè)為15px。

通過(guò)上述步驟畫(huà)出的點(diǎn)的樣式如下圖所示，是一個(gè)由內(nèi)向外放射漸變的灰色圓：

所有點(diǎn)疊加在地圖上的效果如下圖所示：

3.疊加顯示，權(quán)重（密度）算法
上面的繪制結(jié)果中，因?yàn)闆](méi)有使用到權(quán)重值，所以每個(gè)數(shù)據(jù)點(diǎn)圓的中心點(diǎn)灰度值都是1，不能直接用于顏色映射，需要根據(jù)離散點(diǎn)緩沖區(qū)的疊加來(lái)確定熱力分布密度。每一個(gè)熱點(diǎn)都有一個(gè)位置和權(quán)重，權(quán)重越大，則該點(diǎn)越顯著，也就代表其漸變的一個(gè)衰變因素，此時(shí)，我們需要根據(jù)不同的count設(shè)置出不同的alpha值。本文主要根據(jù)count最小值對(duì)應(yīng)alpha0，最大值對(duì)應(yīng)1的映射計(jì)算方式，求得每個(gè)數(shù)據(jù)點(diǎn)，從而繪制出alpha：

結(jié)合上一步驟，在canvas中完整的繪制方法如下：

具體繪制出的效果如下圖所示，從實(shí)例圖的對(duì)比中可以看出，一個(gè)好的權(quán)重映射方法對(duì)熱力圖的顯示效果起到非常重要的作用。

4.顏色映射
根據(jù)畫(huà)布上每個(gè)像素點(diǎn)累計(jì)得到的灰度值，可以從彩色映射色帶中得到對(duì)應(yīng)位置的顏色。
那么如何得到畫(huà)布上每個(gè)像素點(diǎn)的信息呢？可以使用canvas提供的getImageData()方法，返回 ImageData 對(duì)象，該對(duì)象拷貝了畫(huà)布指定矩形的像素?cái)?shù)據(jù)。需要注意的是，ImageData對(duì)象中的每個(gè)像素，都包含RGBA四項(xiàng)信息：

根據(jù)canvas提供的putImageData()方法，可以將像素級(jí)的數(shù)據(jù)放回到畫(huà)布中。
在熱力圖繪制過(guò)程中，利用這兩個(gè)方法，可以從上一步驟繪制得到的熱力圖中獲得每個(gè)像素點(diǎn)疊加得到的alpha通道的灰度值(0~255)，再建立一條長(zhǎng)度為256px的彩×××帶，從中映射得到該像素點(diǎn)對(duì)應(yīng)的顏色RGB值。
建立一條長(zhǎng)度為256px彩虹條的過(guò)程如下圖所示：

自定義顏色得到的彩色條示例：

從彩虹條中映射顏色的過(guò)程如下所示：

經(jīng)過(guò)以上步驟，我們可以得到的熱力圖效果如下：

最后，為大家提供一個(gè)熱力圖的性能優(yōu)化方法，由于熱力圖一次性加載的點(diǎn)過(guò)多，所以容易出現(xiàn)卡頓問(wèn)題，而前端在渲染熱力圖時(shí)，可以進(jìn)行熱力圖的點(diǎn)聚合優(yōu)化。關(guān)于點(diǎn)聚合優(yōu)化的實(shí)施方法：將視窗劃分成為網(wǎng)格進(jìn)行操作，由此判斷熱力圖數(shù)據(jù)點(diǎn)在網(wǎng)格中所處的位置，如果同時(shí)幾個(gè)點(diǎn)處于一個(gè)網(wǎng)格，則合并這幾個(gè)點(diǎn)，以此降低渲染成本。
可以這樣判斷每個(gè)點(diǎn)在網(wǎng)格中的分布位置：

網(wǎng)格劃分以及點(diǎn)聚合方法如下：

通過(guò)上述分享后，關(guān)于熱力圖的前端實(shí)踐過(guò)程，想必大家已有所了解！
關(guān)于熱力圖的應(yīng)用：
前端完成一個(gè)完整的熱力圖后，可應(yīng)用于多項(xiàng)業(yè)務(wù)當(dāng)中。拿個(gè)推熱力圖來(lái)說(shuō)，能夠幫助景區(qū)做人流分布狀況檢測(cè)，通過(guò)不同顏色區(qū)塊的疊加，展示景區(qū)不同區(qū)域的人口密度，協(xié)助景區(qū)做好智能管理。此外，個(gè)推熱力圖還能為災(zāi)害救援提供支持，有效指導(dǎo)人群疏散，為政府部門(mén)的災(zāi)后救援工作提供重大幫助。