熱圖有時候叫熱區圖或者熱力圖，都是用於表現某種事物密集度的圖形化顯示。
我寫的這個沒有畫底圖，不然會更有趣，比如一個鍵盤，一張房屋平面圖，或者一張Google地圖，拿它做什麼用，完全取決於你的需要。
一、主要用途
1、網站設計，可以幫助設計人員知道用戶喜歡點哪些地方，對哪些東西感興趣，以此來改良設計，改善用戶體驗，百度和騰訊都有提供此類有償服務。 對位置不敏感，就比如有張全身照的美女圖，通過統計就可以知道別人最喜歡看美女的哪個部位，是不是很有意思。
2、模擬分佈，比如氣象雲圖、無線射頻信號的分佈等等，都可以用這個來做。
3、衆多例子：http://www.patrick-wied.at/static/heatmapjs/showcases.html
二、原理
1、首先可以參考下面幾個鏈接
JavaScript: [一個用canvas畫熱力圖的利器] http://www.cnblogs.com/bdqlaccp/archive/2012/09/12/2681518.html
jQuery: [淺談Heatmap] http://huoding.com/2011/01/04/39
Python: [pyHeatMap : 使用Python繪製熱圖的庫] http://oldj.net/article/python-heat-map/
2、基本原理：
A、創建一個跟圖片大小或者網頁或者窗口一樣大小的二維數組（可用一維實現），例如圖片分辨率爲1024x768，則你的二維數組爲768行，1024列，數據所有元素均初始化爲0。
B、準備兩張同樣大小的畫布（在Qt下可用QImage，在JavaScript下可用canvas，在Python下可用PIL庫的Image），一張用於繪製灰度漸變圓圈（假設爲 Alpha_Canvas），一張用於着色後顯示輸出（Output_Canvas）。
C、準備一個調色板，調色板從0到255填充上線性漸變的顏色，這個顏色可根據需要自由指定，調色板主要用於着色操作中取顏色。
D、我們假設在畫布上點擊一下算是採一個點，則點擊一下對應的數組元素的值增加1，用於標識該位置（又）被點擊了一次。
E、我們保存一個整個數組中單個位置被點擊次數最多的值（假設爲：max），比如在整個畫布中，（10，10）這個位置被點擊了20次，而其他所有點均在該點的點擊次數之下，則20被存儲到該變量（max）中。這就意味着每點擊一次都要拿當前座標點的點擊次數和最大點擊次數相比，如果最大點擊次數小於當前點擊次數，則更新最大點擊次數，並重新繪製整個圖。
F、選擇Alpha_Canvas畫布，在被點擊的地方繪製一個徑向漸變的圓，圓心爲被點擊的座標，半徑可根據需要自由設置，徑向漸變圓的是灰度漸變圓圈，整個徑向漸變圓圈是一個黑色圓圈，但圓心的顏色要比邊界的深，而圓心的Alpha通道值是該點的被點擊次數（假設爲：current_count）與被點擊次數最多的值之比乘以255（255要根據你的繪圖環境來確定，在Qt中255表示完全不透明，0表示完全透明），即公式：current_count/max*255。
G、選擇Output_Canva畫布，進行着色操作，根據上一步的圓心和半徑可確定一個矩形區域，如果是重繪操作，則該矩形區域爲整個圖形區域。對該矩形區域進行遍歷，取出Alpha_Canvas畫布上每個顏色點的Alpha通道值，根據此值從調色板上取出對應的顏色，R、G、B三個值用從調色板取來的值，但Alpha通道值不能相同，在這裏可以設置一個閾值，用於決定漸變開始的半徑，也可以自由修改。將這四個值決定的顏色點繪製到Output_Canvas畫布上，依此操作，直至遍歷結束。
H、完成着色操作後，整個繪圖過程就完畢了。
3、開源項目
JavaScript 版本：[heatmap.js] http://www.patrick-wied.at/static/heatmapjs/index.html
Python 版本：[pyHeatMap] https://github.com/oldj/pyheatmap
C++/Qt版本：[QHeatMap] https://github.com/pbesedm/QHeatMap [本人實現]
4、JavaScript、Python、C++三種實現方法都有，相信你能明白原理，不明白請回復或聯繫我。
三、截圖
![]()
![]()
我寫的這個沒有畫底圖，不然會更有趣，比如一個鍵盤，一張房屋平面圖，或者一張Google地圖，拿它做什麼用，完全取決於你的需要。
一、主要用途
1、網站設計，可以幫助設計人員知道用戶喜歡點哪些地方，對哪些東西感興趣，以此來改良設計，改善用戶體驗，百度和騰訊都有提供此類有償服務。 對位置不敏感，就比如有張全身照的美女圖，通過統計就可以知道別人最喜歡看美女的哪個部位，是不是很有意思。
2、模擬分佈，比如氣象雲圖、無線射頻信號的分佈等等，都可以用這個來做。
3、衆多例子：http://www.patrick-wied.at/static/heatmapjs/showcases.html
二、原理
1、首先可以參考下面幾個鏈接
JavaScript: [一個用canvas畫熱力圖的利器] http://www.cnblogs.com/bdqlaccp/archive/2012/09/12/2681518.html
jQuery: [淺談Heatmap] http://huoding.com/2011/01/04/39
Python: [pyHeatMap : 使用Python繪製熱圖的庫] http://oldj.net/article/python-heat-map/
2、基本原理：
A、創建一個跟圖片大小或者網頁或者窗口一樣大小的二維數組（可用一維實現），例如圖片分辨率爲1024x768，則你的二維數組爲768行，1024列，數據所有元素均初始化爲0。
B、準備兩張同樣大小的畫布（在Qt下可用QImage，在JavaScript下可用canvas，在Python下可用PIL庫的Image），一張用於繪製灰度漸變圓圈（假設爲 Alpha_Canvas），一張用於着色後顯示輸出（Output_Canvas）。
C、準備一個調色板，調色板從0到255填充上線性漸變的顏色，這個顏色可根據需要自由指定，調色板主要用於着色操作中取顏色。
D、我們假設在畫布上點擊一下算是採一個點，則點擊一下對應的數組元素的值增加1，用於標識該位置（又）被點擊了一次。
E、我們保存一個整個數組中單個位置被點擊次數最多的值（假設爲：max），比如在整個畫布中，（10，10）這個位置被點擊了20次，而其他所有點均在該點的點擊次數之下，則20被存儲到該變量（max）中。這就意味着每點擊一次都要拿當前座標點的點擊次數和最大點擊次數相比，如果最大點擊次數小於當前點擊次數，則更新最大點擊次數，並重新繪製整個圖。
F、選擇Alpha_Canvas畫布，在被點擊的地方繪製一個徑向漸變的圓，圓心爲被點擊的座標，半徑可根據需要自由設置，徑向漸變圓的是灰度漸變圓圈，整個徑向漸變圓圈是一個黑色圓圈，但圓心的顏色要比邊界的深，而圓心的Alpha通道值是該點的被點擊次數（假設爲：current_count）與被點擊次數最多的值之比乘以255（255要根據你的繪圖環境來確定，在Qt中255表示完全不透明，0表示完全透明），即公式：current_count/max*255。
G、選擇Output_Canva畫布，進行着色操作，根據上一步的圓心和半徑可確定一個矩形區域，如果是重繪操作，則該矩形區域爲整個圖形區域。對該矩形區域進行遍歷，取出Alpha_Canvas畫布上每個顏色點的Alpha通道值，根據此值從調色板上取出對應的顏色，R、G、B三個值用從調色板取來的值，但Alpha通道值不能相同，在這裏可以設置一個閾值，用於決定漸變開始的半徑，也可以自由修改。將這四個值決定的顏色點繪製到Output_Canvas畫布上，依此操作，直至遍歷結束。
H、完成着色操作後，整個繪圖過程就完畢了。
3、開源項目
JavaScript 版本：[heatmap.js] http://www.patrick-wied.at/static/heatmapjs/index.html
Python 版本：[pyHeatMap] https://github.com/oldj/pyheatmap
C++/Qt版本：[QHeatMap] https://github.com/pbesedm/QHeatMap [本人實現]
4、JavaScript、Python、C++三種實現方法都有，相信你能明白原理，不明白請回復或聯繫我。
三、截圖
