zoukankan      html  css  js  c++  java
  • 网页热力图 heatmap js

    HBuilder +js 实现网页热力图

    废话不多说,上代码

      1 <!DOCTYPE html>
      2 <html>
      3   <head>
      4     <title>111</title>
      5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      6     <meta charset="utf-8" />
      7     <link rel="stylesheet" href="css/commons.css" />
      8     <link rel="stylesheet" href="css/landingpage.css" />
      9   </head>
     10   <body>
     11       
     12  <div id="out"></div>   
     13 <section class="example">
     14         <h2>A Quick Example</h2>
     15         With only a few lines of code you can create your own interactive web heatmap:<br style="clear:both" />
     16         <div class="example-1">heatmap </div>
     17         
     18       
     19 </section>    
     20       
     21 <script src="js/heatmap.min.js"></script>
     22   <script>
     23   
     24 var writer = document.getElementById("out");
     25 
     26 function geoFindMe() {
     27   var output = document.getElementById("out");
     28 
     29   if (!navigator.geolocation){
     30     output.innerHTML = "<p>您的浏览器不支持地理位置</p>";
     31     return;
     32   }
     33 
     34   function success(position) {
     35     var latitude  = position.coords.latitude;
     36     var longitude = position.coords.longitude;
     37 
     38     output.innerHTML = '<p><Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';
     39 
     40     var img = new Image();
     41     img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";
     42 
     43     output.appendChild(img);
     44   };
     45 
     46   function error() {
     47     output.innerHTML = "无法获取您的位置";
     48   };
     49 
     50   output.innerHTML = "<p>Locating…</p>";
     51 
     52   navigator.geolocation.getCurrentPosition(success, error);
     53 }
     54   </script>
     55   
     56   
     57     <script>
     58     // @TODO:
     59     // clean up.
     60     window.onload = function() {
     61         
     62         geoFindMe();
     63         var ex1el = document.querySelector('.example-1');
     64         
     65         var heatmap3 = h337.create({
     66           container: ex1el
     67         });
     68         
     69          var refreshHeatmap1 = function() {
     70           var data1 = {};
     71           var datap1 = [];
     72           var max1 = 0;
     73           var w = 1024;
     74           var h = 1024;
     75           var l = 50;
     76           while(l--) {
     77             var val = Math.random()*10;
     78             max1 = Math.max(max1, val);
     79             var d = {
     80               x: Math.floor(Math.random()*w),
     81               y: Math.floor(Math.random()*h),
     82               value: val
     83             };
     84             datap1.push(d);
     85           }
     86           data1["max"] = max1;
     87           data1["data"] = datap1;
     88 
     89           heatmap3.setData(data1);
     90         };
     91         refreshHeatmap1();
     92 
     93         ex1el.onclick = function() {
     94           refreshHeatmap1();
     95         };
     96 };
     97   </script>
     98 <div ></div>
     99 </body>
    100 </html>

     代码中用到的 heatmap.min.js  请搜索 heatmap 下载

    https://www.patrick-wied.at/static/heatmapjs/

    /*
    * heatmap.js v2.0.0 | JavaScript Heatmap Library
    *
    * Copyright 2008-2014 Patrick Wied <heatmapjs@patrick-wied.at> - All rights reserved.
    * Dual licensed under MIT and Beerware license
    *
    * :: 2014-08-05 01:42
    */

  • 相关阅读:
    Jmeter +Maven+jenkins+eclipse 接口自动化测试
    感知机
    第1章 统计学习方法概论
    java jdk安装 以及myeclipse安装
    邻接表
    c语言 文件写入和读取
    c++ string
    线程-run和start
    Transfer learning across two sentiment classes using deep learning
    层次遍历
  • 原文地址:https://www.cnblogs.com/qiri07/p/5622596.html
Copyright © 2011-2022 走看看