<!DOCTYPE html>
<html>
<head>
<title>热力图插件heatmap.js - 网页模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/commons.css" />
<link rel="stylesheet" href="css/landingpage.css" />
</head>
<body>
<div class="heatmap-wrapper">
<div class="heatmap">
</div>
</div>
<div class="wrapper">
<section class="header">
<h2 class="primary">heatmap.js</h2>
<h1 class="secondary">Dynamic Heatmaps for the Web</h1>
<img src="css/front.png" style="display:block;margin:auto;"/>
<br/>This JavaScript library will help you make your 3 dimensional data speak up.<br /><br />Use heatmap.js v2.0 to add new value to your project, build a business based on it, study and visualize user behaviour, and much more.<br /><br /> Whether you want to have an aggregated overview of your users behaviour, or look at thousands of events distributed on a map...<div style="margin-top:15px;text-align:center;"><strong>heatmap.js has all your heatmap visualization needs covered!</strong></div><br />
</section>
<section>
<h2>Why heatmap.js?</h2>
heatmap.js v2.0 is the <strong>most advanced heatmap visualization library on the web.</strong><br />
It has a light footprint (~3kB gzip) and with the new 2.0 release heatmap.js just got
<ul>
<li><strong>faster</strong>, with a new rendering module</li>
<li><strong>stronger</strong>, to handle even <strong>more datapoints</strong> (40k+)</li>
<li><strong>easier to use</strong> so you can get up to speed quickly</li>
<li><strong>easier to extend</strong> for custom functionality</li>
</ul>
than ever before. Also:<div style="margin-top:15px;text-align:center;">All the struggles with unpredictably bad open source support have an end<br /><strong>The new support license will secure you the premium support you deserve</strong></div>
</section>
<section class="example">
<h2>A Quick Example</h2>
With only a few lines of code you can create your own interactive web heatmap:<br style="clear:both" />
<div class="example-1">
</div><pre class="code"><code class="language-javascript">var heatmap = h337.create({
container: <strong>domElement</strong>
});
heatmap.setData({
max: 5,
data: [{ x: 10, y: 15, value: 5}, ...]
});</code></pre>
<!-- <section class="showoff">
Even this website has a heatmap. <br /><br /><button class="btn show-hm">display your heatmap</button>
</section> -->
<section class="testimonials">
<h2>What users say</h2>
<div class="testimonial" id="t2">
<p>"One to rule them all: Heatmap.js is great! Besides allowing us to make beautiful heatmaps, it also gives us independence to use different maps library, such as leaflet and google map."</p>
<span>- <strong>Rodrigo Saad</strong>, PhD. Eng. in HPC and System Dependability</span>
</section>
<section class="bottomcta"></section>
<section>
<h2>Don't want to get your hands dirty?</h2>
Or not a developer? Save some time and pre-register for our user behaviour tracking service optimized to get the most out of your users data.
<div class="cta-gethm">
<div class="cta-in">
<input class="in-email" type="text" placeholder="your@email.com" /><!--
--><button class="btn-gethm btn">pre-register</button>
</div>
</div>
<br /><br />
</section>
</div>
<script src="js/heatmap.min.js"></script>
<script>
// @TODO:
// clean up.
window.onload = function() {
var ex1el = document.querySelector('.example-1');
document.querySelector('.btn-gethm').onclick = function() {
var email = document.querySelector('.in-email').value;
if (email.length < 5) {
document.querySelector('.in-email').style.outlineColor = 'red';
document.querySelector('.in-email').focus();
return;
}
var xhr = new XMLHttpRequest();
xhr.onload = function() {
document.querySelector('.cta-in').innerHTML = "<strong>You'll be the first to know when the beta starts</strong>";
};
xhr.open('GET', 'pre-register.php?email=' + email, true);
xhr.send();
};
var heatmap1 = h337.create({
container: ex1el
});
var refreshHeatmap1 = function() {
var data1 = {};
var datap1 = [];
var max1 = 0;
var w = 320;
var h = 270;
var l = 50;
while(l--) {
var val = Math.random()*10;
max1 = Math.max(max1, val);
var d = {
x: Math.floor(Math.random()*w),
y: Math.floor(Math.random()*h),
value: val
};
datap1.push(d);
}
data1["max"] = max1;
data1["data"] = datap1;
heatmap1.setData(data1);
};
refreshHeatmap1();
ex1el.onclick = function() {
refreshHeatmap1();
};
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
var body = document.body;
var bodyStyle = getComputedStyle(body);
var hmEl = document.querySelector('.heatmap-wrapper');
hmEl.style.width = bodyStyle.width;
hmEl.style.height = '1400px';
var hm = document.querySelector('.heatmap');
var heatmap = h337.create({
container: hm
});
var trackData = false;
setInterval(function() {
trackData = true;
}, 50);
var idleTimeout, idleInterval;
var lastX, lastY;
var idleCount;
function startIdle() {
idleCount = 0;
function idle() {
heatmap.addData({
x: lastX,
y: lastY
});
idleCount++;
if (idleCount > 10) {
clearInterval(idleInterval);
}
};
idle();
idleInterval = setInterval(idle, 1000);
};
body.onmousemove = function(ev) {
if (idleTimeout) clearTimeout(idleTimeout);
if (idleInterval) clearInterval(idleInterval);
if (trackData) {
lastX = ev.pageX;
lastY = ev.pageY;
heatmap.addData({
x: lastX,
y: lastY
});
trackData = false;
}
idleTimeout = setTimeout(startIdle, 500);
};
setTimeout(function() {
document.querySelector('.sharer').classList.add('show');
},1000);
};
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
