码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-04-02 16:32:29      阅读:607      评论:0      收藏:0      [点我收藏+]

标签:heatmap   热点图   热力图   

 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>


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

标签:heatmap   热点图   热力图   

原文地址:http://blog.csdn.net/tuposky/article/details/44832377

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!