利用 heatmap.js 创建热力图

前端

代码

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

发表回复

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