利用 heatmap.js 创建热力图

代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset=“UTF-8”>
  5.   <title></title>
  6.   <style>
  7.     div {
  8.       width: 600px;
  9.       height: 400px;
  10.       border: none;
  11.     }
  12.   </style>
  13. </head>
  14. <body>
  15.   <div id=“heatmap”></div>
  16. </body>
  17. <script src=“https://cdn.bootcss.com/heatmap.js/2.0.2/heatmap.min.js”></script>
  18. <script type=“text/javascript”>
  19.   // 创建一个heatmap实例对象
  20.   var heatmapInstance = h337.create({
  21.     container: document.querySelector(‘#heatmap’),
  22.   });
  23.   //构建一些随机数据点
  24.   var getPoints = function () {
  25.     var points = [];
  26.     var max = 0;
  27.     var width = 600;
  28.     var height = 400;
  29.     var len = 200;
  30.     while (len–) {
  31.       var val = Math.floor(Math.random() * 100);
  32.       max = Math.max(max, val);
  33.       var point = {
  34.         x: Math.floor(Math.random() * width),
  35.         y: Math.floor(Math.random() * height),
  36.         value: val
  37.       };
  38.       points.push(point);
  39.     }
  40.     var data = {
  41.       max: max,
  42.       data: points
  43.     };
  44.     return data;
  45.   }
  46.   //数据绑定
  47.   setInterval(function () {
  48.     heatmapInstance.setData(getPoints());
  49.   }, 3000)
  50.   heatmapInstance.setData(getPoints());
  51. </script>
  52. </html>

例子详解

  1. h337.create({
  2.   container: document.getElementById(“text”),
  3.   backgroundColor: ‘red’, // ‘#121212’ ‘rgba(0,102,256,0.2)’
  4.   gradient: {
  5.     ‘0.5’: ‘blue’,
  6.     ‘0.8’: ‘red’,
  7.     ‘0.95’: ‘white’,
  8.     ‘0.6’: ‘yellow’,
  9.     ‘0.5’: ‘green’
  10.   },
  11.   radius: 10, // [0,+∞)
  12.   opacity: 0.8,
  13. });

h337.create(configObject)

创建heatmap实例,configObject是一个json对象,里面有很多参数

参数详情

container 页面操作div的dom对象,如div的id为test,可以写成

backgroundColor 画板的背景颜色设置,支持rgb(a),颜色名称,但必须要用引号

gradient  设置热点图的光圈颜色,数值为[0,1],数值大的在光圈内侧,数值相等则靠下的生效,数值设置不分大小顺序,并可以同时设置很多颜色

radius 设置光圈的半径大小,值>=0,=0取得是默认值

opacity 光圈透明度设置[0,1],如果值设置了,会重写maxOpacity和minOpacity的值

更多请参照文档: https://www.patrick-wied.at/static/heatmapjs/docs.html

本文链接地址: 利用 heatmap.js 创建热力图

发表评论

电子邮件地址不会被公开。 必填项已用*标注