【Heatmap】自動生成一張熱力圖


文章之前介紹了熱力圖的引用,以及如何設置,本篇文章就不再贅述。

業務需求:

    要求在頁面中自動生成一些熱力點。

代碼實現:

Minimal.js

// minimal heatmap instance configuration
var heatmapInstance = h337.create({ //創建一個heatmap
    // only container is required, the rest will be defaults
    container: document.querySelector('.heatmap')    //在哪個標簽上綁定,綁定后會在這個標簽下新增一個cavanse(畫布)
});

// now generate some random data  這里設置了一些隨機數,目的是為了產生一些隨機熱力點
var points = [];   //存儲熱力點的數組
var max = 0;     //cavanse中點擊次數最多的點,意味着這個點亮度最高
var width = 840;//設置cavanse寬
var height = 400;//設置cavanse高
var len = 300;//要生成多少個點

while (len--) {   //每次循環減一,控制循環次數
    var val = Math.floor(Math.random()*100);//點擊次數
    // now also with custom radius
    var radius = Math.floor(Math.random()*70);  //熱力點的半徑

    max = Math.max(max, val);   //篩選出來最大點擊值,如果沒有點擊自然是上邊設置的max=0
    var point = {    //設置單點屬性
        x: Math.floor(Math.random()*width),  //x坐標
        y: Math.floor(Math.random()*height),   //y坐標
        value: val,     //點擊次數
        // radius configuration on point basis
        radius: radius
    };
    points.push(point);  //將設置好的點存儲進數組
}
// heatmap data format
var data = {    //設置cavanse中的數據
    max: max,   //設置點擊次數最多的點
    data: points
};
// if you have a set of datapoints always use setData instead of addData
// for data initialization
heatmapInstance.setData(data);
//注意這里是setData不是addData ,兩者的區別就是setData會刪除上一次繪制的熱力點,重新添加數據,addData是在現有基礎上再新加數據

//這里可以有一個思路:就是獲取用戶在頁面中點擊的網頁的坐標,然后存儲到數據庫。然后將數據庫中的數據導出,在var point 位置設置成自己的數據。 
// 循環次數len就是某個頁面點擊的總次數

這里是生成熱力點的js,同時還需要引入heatmap.js 並且自己寫網頁。

還是無私分享下吧~

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    body{
        width:100%;height:100%;
    }
    </style>
</head>
<body>

<input id=xxx type=hidden  value="">

<input id=yyy type=hidden value="">
<!--<input id="array" type="button" value="點擊查看數組內容" onclick="getindex()"/>-->

<div class="demo-wrapper">
    <div class="heatmap" style="position: relative;">
        <div><img src="image/1.jpg" ></div>

    </div>
</div>
</body >
<script src="js/heatmap.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/key-minimal.js"></script>
</html>
上邊js給了一些讀取自己數據點的思路,歡迎大家實現。

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com