數據可視化：淺談熱力圖如何在前端實現

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

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

2.在地圖上填充數據
基于canvas繪制熱力圖時，熱力圖中每個數據點的半徑大小會直接影響到熱力圖的展現效果，所以一般要結合使用地圖的縮放級別以及數據精度來進行設置，本文示例默認設為15px。

通過上述步驟畫出的點的樣式如下圖所示，是一個由內向外放射漸變的灰色圓：

所有點疊加在地圖上的效果如下圖所示：

3.疊加顯示，權重（密度）算法
上面的繪制結果中，因為沒有使用到權重值，所以每個數據點圓的中心點灰度值都是1，不能直接用于顏色映射，需要根據離散點緩沖區的疊加來確定熱力分布密度。每一個熱點都有一個位置和權重，權重越大，則該點越顯著，也就代表其漸變的一個衰變因素，此時，我們需要根據不同的count設置出不同的alpha值。本文主要根據count最小值對應alpha0，最大值對應1的映射計算方式，求得每個數據點，從而繪制出alpha：

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

具體繪制出的效果如下圖所示，從實例圖的對比中可以看出，一個好的權重映射方法對熱力圖的顯示效果起到非常重要的作用。

4.顏色映射
根據畫布上每個像素點累計得到的灰度值，可以從彩色映射色帶中得到對應位置的顏色。
那么如何得到畫布上每個像素點的信息呢？可以使用canvas提供的getImageData()方法，返回 ImageData 對象，該對象拷貝了畫布指定矩形的像素數據。需要注意的是，ImageData對象中的每個像素，都包含RGBA四項信息：

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

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

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

經過以上步驟，我們可以得到的熱力圖效果如下：

最后，為大家提供一個熱力圖的性能優化方法，由于熱力圖一次性加載的點過多，所以容易出現卡頓問題，而前端在渲染熱力圖時，可以進行熱力圖的點聚合優化。關于點聚合優化的實施方法：將視窗劃分成為網格進行操作，由此判斷熱力圖數據點在網格中所處的位置，如果同時幾個點處于一個網格，則合并這幾個點，以此降低渲染成本。
可以這樣判斷每個點在網格中的分布位置：

網格劃分以及點聚合方法如下：

通過上述分享后，關于熱力圖的前端實踐過程，想必大家已有所了解！
關于熱力圖的應用：
前端完成一個完整的熱力圖后，可應用于多項業務當中。拿個推熱力圖來說，能夠幫助景區做人流分布狀況檢測，通過不同顏色區塊的疊加，展示景區不同區域的人口密度，協助景區做好智能管理。此外，個推熱力圖還能為災害救援提供支持，有效指導人群疏散，為政府部門的災后救援工作提供重大幫助。