因為項目需要繪制地圖熱力圖，然后我就試了一下 leaflet.js以及heatmap.js
heatmap.js主頁

萬事從例子出發(fā)嘛，官網(wǎng)給了一個最小的熱力圖例子。
Minimal Configuration Example

// minimal heatmap instance configuration 配置
var heatmapInstance = h337.create({
  // only container is required, the rest will be defaults  只需要一個container，也就是最終要繪制圖形的dom節(jié)點，其他都默認(rèn)
  container: document.querySelector('.heatmap')
});

// now generate some random data  產(chǎn)生隨機數(shù)
var points = [];
var max = 0;
var width = 840;
var height = 400;
var len = 200;

while (len--) {
  var val = Math.floor(Math.random()*100);
  max = Math.max(max, val); //注意這里有個max用來設(shè)置最大值
  var point = {
    x: Math.floor(Math.random()*width),
    y: Math.floor(Math.random()*height),
    value: val
  };
  points.push(point);
}
// heatmap data format
var data = { 
  max: max,  //所有數(shù)據(jù)中的最大值
  data: points //最終要展示的數(shù)據(jù)
};
// if you have a set of datapoints always use setData instead of addData
// for data initialization
heatmapInstance.setData(data);

很簡單的代碼，然后就得到了這個效果。

heatmap

總的來說就是做了兩件事情

1. 初始化實例，heatmapInstance
2. 給實例設(shè)置數(shù)據(jù)

當(dāng)然原來的頁面給了一個按鈕，你可以用來重新生成隨機熱力圖。

document.querySelector('.trigger-refresh').onclick=function({
  heatmapInstance.setData(generateRandomData(200));
}

由此我們可以不斷地更新熱力圖。
第二個例子更加簡單，配置了點的半徑

var point = {
   x: Math.floor(Math.random()*width),
   y: Math.floor(Math.random()*height),
   value: val,
   // radius configuration on point basis 主要是半徑的配置,
   radius: radius
 };
 points.push(point);
}

然后是自定義設(shè)置的例子

// customized heatmap configuration
var heatmapInstance = h337.create({
  // required container
  container: document.querySelector('.heatmap'),
  // backgroundColor to cover transparent areas  背景顏色，可以覆蓋透明區(qū)域
  backgroundColor: 'rgba(0,0,0,.95)',
  // custom gradient colors 這里設(shè)置了顏色梯度。鍵值從0到1
  gradient: {
    // enter n keys between 0 and 1 here
    // for gradient color customization
    '.5': 'blue',
    '.8': 'red',
    '.95': 'white'
  },
  // the maximum opacity (the value with the highest intensity will have it) 最高透明度
  maxOpacity: .9,
  // minimum opacity. any value > 0 will produce 
  // no transparent gradient transition 
  minOpacity: .3
});

// now generate some random data
var points = [];
var max = 0;
var width = 840;
var height = 400;
var len = 300;

while (len--) {
  var val = Math.floor(Math.random()*100);
  var radius = Math.floor(Math.random()*70);

  max = Math.max(max, val);
  var point = {
    x: Math.floor(Math.random()*width),
    y: Math.floor(Math.random()*height),
    value: val,
    radius: radius
  };
  points.push(point);
}
// heatmap data format
var data = { 
  max: max, 
  data: points 
};
// if you have a set of datapoints always use setData instead of addData
// for data initialization
heatmapInstance.setData(data);

總的來說，也就是在創(chuàng)建實例的時候，設(shè)置了一些基本配置。

Paste_Image.png

關(guān)于采訪者的熱力圖，有人已經(jīng)做好了All-in-one Analytics & Feedback，不用重復(fù)造輪子（reinvent the wheel原來來自英文)。

GET VISITOR HEATMAPS. NO CODING REQUIRED.
Our awesome partners offer out of the box visitor heatmaps so you don't have to reinvent the wheel! ( plus, there's always a FREE plan to start with!)

有了三個例子傍身，這個時候我們可以去開心地看文檔了。

文檔告訴我們，總共有兩個對象，一個叫h337，一個叫heatmapInstance。

Paste_Image.png

Paste_Image.png

當(dāng)然還有更多實例，詳情見這里