热点图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