heatmap.js v2.0 热点图插件使用demo例子

本文链接：https://blog.csdn.net/tuposky/article/details/44832377

heatmap.js 是目前适用范围最广的热点图插件，他的实现原理是通过canvas来绘出热点图的区域点的，所以heatmap只能在支持html5的浏览器上使用。

效果图显示

demo代码：

<html>
<body>
    <div id="heatmap" style="width:600px; height:400px;border: 1px solid;border-color: grey;"></div>
</body>

<script src="heatmap.min.js"></script>

<script type="text/javascript">
// 创建一个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);
**/

</script>

</html>