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

當咱們須要用更直觀有效的形式來展示各種大數據信息時，熱力圖無疑是一種很好的方式。做爲一種密度圖，熱力圖通常使用具有顯著顏色差別的方式來呈現數據效果，熱力圖中亮色通常表明事件發生頻率較高或事物分佈密度較大，暗色則反之。值得一提的是，熱力圖最終效果經常優於離散點的直接顯示，能夠在二維平面或者地圖上直觀地展示空間數據的疏密程度或頻率高低。

 

那麼製做一張完整的熱力圖，須要前端作哪些工做呢？接下來，我將基於本身在工做過程當中的實踐，爲你們詳細解析熱力圖在前端的實現過程。

首先給你們看一張完整的熱力圖實現效果圖：

 

關於熱力圖的實現原理：

通常可大體概括爲如下幾個步驟：

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彩虹條的過程以下圖所示：

 

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

 

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

 

通過以上步驟，咱們能夠獲得的熱力圖效果以下：

 

最後，爲你們提供一個熱力圖的性能優化方法，因爲熱力圖一次性加載的點過多，因此容易出現卡頓問題，而前端在渲染熱力圖時，能夠進行熱力圖的點聚合優化。關於點聚合優化的實施方法：將視窗劃分紅爲網格進行操做，由此判斷熱力圖數據點在網格中所處的位置，若是同時幾個點處於一個網格，則合併這幾個點，以此下降渲染成本。

能夠這樣判斷每一個點在網格中的分佈位置：

 

 

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

 

經過上述分享後，關於熱力圖的前端實踐過程，想必你們已有所瞭解！

關於熱力圖的應用：

前端完成一個完整的熱力圖後，可應用於多項業務當中。拿個推熱力圖來講，可以幫助景區作人流分佈情況檢測，經過不一樣顏色區塊的疊加，展現景區不一樣區域的人口密度，協助景區作好智能管理。此外，個推熱力圖還能爲災害救援提供支持，有效指導人羣疏散，爲政府部門的災後救援工做提供重大幫助。