一、傳送門
heatMap參考文章：http://blog.corunet.com/how-to-make-heat-maps/
二、代碼結構
1、整個js庫包裹在一個立即執行的匿名函數裏，以避免污染全局命名空間。這也是很多js庫的常見寫法。
2、核心對象有三個：Store（數據）、Canvas2dRenderer（繪製工具）、HeatMap（構建器）。
3、通過global['h337']暴露創建工廠。
三、熱力圖渲染原理
1、設置單點渲染模板
核心方法是canvas的createRadialGradient方法，每個點設置渲染半徑，由漸變因子blur確定內圓比例，內圓與外圓的圓周間進行無色的放射漸變，達到中間透明度高，邊緣透明度低的效果。這個無色的透明度漸變的圓形即爲點的模板。
2、根據模板繪製全部點
核心方法是canvas的drawImage方法，在每個點的位置按照模板進行繪製，達到重疊部分透明度疊加的效果。
3、構建0到256的調色板
核心方法是canvas的createLinearGradient方法
示例代碼如下：
var gradient = paletteCtx.createLinearGradient(0, 0, 256, 1);
for (var key in gradientConfig) {
gradient.addColorStop(key, gradientConfig[key]);
}
paletteCtx.fillStyle = gradient;
paletteCtx.fillRect(0, 0, 256, 1);4、着色
核心方法是canvas的putImageData方法，對繪製的每個點進行着色，獲取繪製的區域中每個像素，根據像素的透明度去調色板中取對應的顏色進行渲染，最後達到熱力圖的效果。
四、具體內容
1、heatmapFactory h337
heatmapFactory創建工廠對象
global['h337'] = heatmapFactory;通過h337屬性名暴露給外界。
| 方法 | 描述 |
|---|---|
creat
|
創建heatmap對象 |
register
|
註冊一個heatmap插件，即給插件一個key以管理 |
creat方法
create: function(config) {
return new Heatmap(config);
}config爲創建heatmap的參數配置信息，具體如下名稱 | 類型 | 描述 |
|---|---|---|
| container | DomNode | heatmap載體,必須 |
| backgroundColor | String | canvas背景色 |
| gradient | Object | 漸變色，用於製作調色板 |
| radius | Number | 點半徑 |
| opacity | Number[0,1] | 熱力圖渲染透明度，設置該參數後，maxOpaticy、 minOpaticy參數無效 |
maxOpacity | Number[0,1] | 熱力圖渲染允許的透明度最大值，默認爲1. |
minOpacity | Number[0,1] | 熱力圖渲染允許的透明度最小值，默認爲0. |
useGradientOpacity | Boolean | 熱力圖渲染是否使用gradient漸變色的透明度，默認爲false， 設置爲true的情況下opacity、maxOpaicy、minOpaticy無效。建議不設置該參數。 |
onExtremaChange | function
callback | 渲染的數據極值發生變化的事件回調函數，由以下函數觸發setData、 setDataMax、setDataMin。可用於圖例的展示，2.0版本中不再在庫中內置圖例展示。 |
| blur | Number[0,1] | 模糊因子，適用於所有的數據點。默認爲0.85。模糊因子越高，梯度就越平滑。也就是做放射顏色漸變時的內圓半徑越小。 |
xField | String | x座標屬性名稱，默認爲'x' |
| yField | String | y座標屬性名稱，默認爲'y' |
valueField | String | 渲染屬性名稱，默認爲'value',若渲染屬性不存在，則一個點value爲1 |
heatmapInstance heatMap對象h337.creat(config)返回的是heatMap對象，且命名爲heatmapInstance。heatmapInstance的API接口如下：| 方法 | 參數 | 描述 |
|---|---|---|
| setData | Object[] data | 設置渲染的數據 |
| addData | Objext data | 添加渲染的數據 |
| removeData | 移除渲染的數據，預留的方法，尚未實現 | |
| setDataMax | Number | 設置渲染最大值，並重新繪製 |
setDataMin | Number | 設置渲染的最小值，並重新繪製 |
configure | config | 設置熱力圖配置信息 |
repaint | 重繪 | |
getData | 返回store中的數據 | |
getDataURL | 返回熱力圖圖片 | |
getValueAt | point | 返回一個像素點渲染數據 |
3、
HeatmapConfig 默認配置
| 名稱 | 默認值 | 描述 |
|---|---|---|
| defaultRadius | 40 | 點半徑 |
| backgroundColor | canvas2d | 繪圖工具，canvas繪圖對象，因canvas現在只支持2D繪圖，這裏應是作爲預留拓展配置。 |
| defaultGradient | {
0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"} | 漸變色，用於製作調色板 |
| defaultMaxOpacity | 1 | 透明度最大值 |
defaultMinOpacity | 0 | 透明度最小值 |
defaultBlur | 0.85 | 顏色漸變因子值，值越大，內圓越小，熱力效果越小。 ps:1-defaultBlur的值作爲CanvasRenderingContext2D.createLinearGradient()方法第三個實參,即漸變開始圓的半徑。 |
defaultXField | x | x座標屬性名稱 |
defaultYField | y | y座標屬性名稱 |
defaultValueField | value | 渲染字段名稱 |
4、
Store 數據管理
| 方法 | 參數 | 描述 |
|---|---|---|
| setData | Object[] data | 設置渲染的數據 |
| addData | Objext data | 添加渲染的數據 |
| removeData | 移除渲染的數據，預留的方法，尚未實現 | |
| setDataMax | Number | 設置渲染最大值，並重新繪製 |
setDataMin | Number | 設置渲染的最小值，並重新繪製 |
setCoordinator | Coordinator | 設置事件管理對象，Coordinator爲heatMap中定義的事件管理類 |
_organiseData | <Object>dataPoint, <Boolean>forceRender | 將數據按照heatmap要求進行格式化 |
getData | 返回當前渲染的數據 |
5、Renderer (Canvas2dRenderer) 渲染管理
| 方法 | 參數 | 描述 |
|---|---|---|
| Canvas2dRenderer | config | 渲染器初始化方法 |
| _getColorPalette | config | 獲取調色板 |
| _setStyles | config | 設置渲染樣式，背景色、漸變因子、透明度。 |
_prepareData | data 數據爲store已處理完成的 | 將store處理完成的數據轉換爲可渲染的數據 |
| _getPointTemplate | radius,
半徑 blur 漸變因子 | 根據圓半徑和漸變因子確定一個點渲染的模板 |
| _drawAlpha | data | 根據渲染的數據進行點繪製，未着色 |
_colorize | 對繪製完成的渲染數據進行着色 | |
| renderPartial | data | 對傳入的數據進行渲染 |
| renderAll | data | 將傳入的數據作爲全部數據進行渲染，即會先清除已有的渲染數據 |
_updateGradient | config | 更新渲染的漸變色，即重新設置調色板 |
updateConfig | config | 更新渲染配置信息，即更新渲染的漸變色和渲染相關樣式 |
setDimensions | width,
height | 設置畫布寬高 |
_clear | 清除畫布 | |
getValueAt | point | 獲取一個像素點數據，包括顏色及透明度 |
getDataURL | 轉換熱力圖爲圖片 |