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

UI设计界面 UI设计界面 主题:1059 回复:2190

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

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

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

发布评论

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

支持 Markdown 语法,需要帮助?

评论(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(xSCALE,ySCALE, 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/