heatmap.js如何制作热力图？

前几天接了个业务，两百块钱。

帮助同校的学妹做前端设计。

其中一个问题是如何用HeatMap.js做热力图呢，我参考了csdn上的数据，得出这个demo

---------------------------------------------------以下是分割线-------------------------------------------

// 创建一个heatmap实例对象
// “h337” 是heatmap.js全局对象的名称。可以使用它来创建热点图实例
var heatmapInstance = h337.create({
  //这里直接指定热点图渲染的div了。
  //heatmap支持自定义的样式方案，具体可看官网api
  container: document.querySelector('#heatmap')
});
 
//构建一些随机数据点，这里替换成你的业务数据
var points = [];
var max = 0;
var width = 600;
var height = 400;
var len = 200;
 
while (len--) {
  var val = Math.floor(Math.random()*100);
  max = Math.max(max, val);
  var point = {
    x: Math.floor(Math.random()*width),
    y: Math.floor(Math.random()*height),
    value: val
  };
  points.push(point);
}
 
var data = {
  max: max,
  data: points
};
 
//因为data是一组数据，所以直接setData
heatmapInstance.setData(data);
 
//数据绑定还可以使用 addData(object|array) 方法
/**
//单个数据点的添加方式 
var dataPoint = { 
  x: 5,
  y: 15,
  value: 100
};
heatmapInstance.addData(dataPoint);
//多个数据点的添加方式
var dataPoints = [dataPoint1, dataPoint2, dataPoint3, dataPoint4];
heatmapInstance.addData(dataPoints);
**/
 参考自

作者：五只鸭子 
来源：CSDN 
原文：https://blog.csdn.net/tuposky/article/details/44832377