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是一组数据，所以直接setDataheatmapInstance.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>
既有美妙的风景，也会有称不上景、只有风的地方。
