热点图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的参数配置信息，具体如下
名称
类型描述containerDomNodeheatmap载体,必须backgroundColor
String
canvas背景色gradient
Object
渐变色，用于制作调色板
radiusNumber点半径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为12、
heatmapInstance heatMap对象
h337.creat(config)返回的是heatMap对象，且命名为
heatmapInstance。
heatmapInstance的API接口如下：
方法参数描述setDataObject[] data设置渲染的数据addDataObjext data添加渲染的数据removeData
移除渲染的数据，预留的方法，尚未实现
setDataMax
Number
设置渲染最大值，并重新绘制
setDataMin
Number
设置渲染的最小值，并重新绘制
configure
config设置热力图配置信息
repaint

重绘
getData

返回store中的数据
getDataURL

返回热力图图片
getValueAt
point返回一个像素点渲染数据

3、

HeatmapConfig  默认配置

名称默认值描述defaultRadius40 点半径backgroundColorcanvas2d绘图工具，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 数据管理

方法参数描述setDataObject[] data设置渲染的数据addDataObjext data添加渲染的数据removeData
移除渲染的数据，预留的方法，尚未实现
setDataMax
Number
设置渲染最大值，并重新绘制
setDataMin
Number
设置渲染的最小值，并重新绘制
setCoordinator
Coordinator
设置事件管理对象，Coordinator为heatMap中定义的事件管理类
_organiseData
<Object>dataPoint, 
<Boolean>forceRender
将数据按照heatmap要求进行格式化
getData

返回当前渲染的数据

5、Renderer (Canvas2dRenderer) 渲染管理

方法参数描述Canvas2dRendererconfig渲染器初始化方法_getColorPaletteconfig获取调色板_setStylesconfig设置渲染样式，背景色、渐变因子、透明度。
_prepareData
data 数据为store已处理完成的
将store处理完成的数据转换为可渲染的数据
_getPointTemplateradius,    半径
blur        渐变因子根据圆半径和渐变因子确定一个点渲染的模板_drawAlphadata根据渲染的数据进行点绘制，未着色
_colorize

对绘制完成的渲染数据进行着色renderPartialdata对传入的数据进行渲染renderAlldata将传入的数据作为全部数据进行渲染，即会先清除已有的渲染数据
_updateGradient
config
更新渲染的渐变色，即重新设置调色板
updateConfig
config
更新渲染配置信息，即更新渲染的渐变色和渲染相关样式
setDimensions
width, height
设置画布宽高
_clear

清除画布
getValueAt
point
获取一个像素点数据，包括颜色及透明度
getDataURL

转换热力图为图片