PHP-如何使用php和js在页面上生成热度图

Question

如何使用php和js在页面上生成热度图呢？只有管理员可以看到。

Answer 1

下面只是一个HTML5 Canvas 热度demo 跟PHP结合做数据统计分析 就深了 帮不上了

<style type="text/css">
#heatmap {
background-image: url("mapbg.jpg");
}
</style>

<canvas id="heatmap" class="clear" style="border: 1px solid ; " height="300" width="300"> </canvas>
<button id="resetButton">Reset</button>
<script>
function log() {
console.log(arguments);
}
var points = {};
var SCALE = 3;

var x = -1;
var y = -1;

function loadDemo() {
document.getElementById("resetButton").onclick = reset;

canvas = document.getElementById("heatmap");
context = canvas.getContext('2d');
context.globalAlpha = 0.2;
context.globalCompositeOperation = "lighter";

function sample() {
if (x != -1) {
addToPoint(x,y)
}
setTimeout(sample, 100);
}

canvas.onmousemove = function(e) {
x = e.clientX - e.target.offsetLeft;
y = e.clientY - e.target.offsetTop;
addToPoint(x,y)
}

sample();
}

function reset() {
points = {};
context.clearRect(0,0,300,300);
x = -1;
y = -1;
}

function getColor(intensity) {
var colors = ["#072933", "#2E4045", "#8C593B", "#B2814E", "#FAC268", "#FAD237"];
return colors[Math.floor(intensity/2)];
}

function drawPoint(x, y, radius) {
context.fillStyle= getColor(radius);
radius = Math.sqrt(radius)*6;
context.beginPath();
context.arc(x, y, radius, 0, Math.PI*2, true)
context.closePath();
context.fill();
}

function addToPoint(x, y) {
x = Math.floor(x/SCALE);
y= Math.floor(y/SCALE);

if (!points[[x,y]]) {
points[[x,y]] = 1;
} else if (points[[x,y]]==10) {
return
} else {
points[[x,y]]++;
}
drawPoint(x*SCALE,y*SCALE, points[[x,y]]);
}

window.addEventListener("load", loadDemo, true);
</script>

Answer 2

我在用的一个插件，可以支持实时数据的显示。

使用方法：

var config = {
"radius": 30,
"element": "heatmapEl",
"visible": true,
"opacity": 40,
"gradient": { 0.45: "rgb(0,0,255)", 0.55: "rgb(0,255,255)", 0.65: "rgb(0,255,0)", 0.95: "yellow", 1.0: "rgb(255,0,0)" }
};

var heatmap = heatmapFactory.create(config);

 // set a dataset
heatmap.store.setDataSet({ max: 10, data: [{x: 10, y: 20, count: 5}, ...]});

// add a single datapoint
heatmap.store.addDataPoint(10, 20);

// export the dataset
var dataSet = heatmap.store.exportDataSet();

插件地址：
http://www.patrick-wied.at/static/heatmapjs/

显示效果：
http://www.patrick-wied.at/static/heatmapjs/demo/static_heatmap/