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

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

虐人心 发布于 2016-12-15 字数 64 浏览 1002 回复 2

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

虐人心 2017-04-25 2 楼

下面只是一个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>

泛泛之交 2017-01-12 1 楼

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

使用方法:

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/