热点图heatMap.js V2.0 研究笔记

Heatmap.js 是目前应用最广的web动态热图javaScript库，最新版本是2.0。

一、传送门

官方地址：http://www.patrick-wied.at/static/heatmapjs/

官方文档地址：http://www.patrick-wied.at/static/heatmapjs/docs.html

heatMap参考文章：http://blog.corunet.com/how-to-make-heat-maps/

                http://huoding.com/2011/01/04/39

                http://1.aisensiy.sinaapp.com/2011/12/heatmapjs/

                http://blog.csdn.net/long405581649/article/details/24581449

                          

二、代码结构

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

2、

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		将数据按照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		转换热力图为图片