热图 JS - JavaScript

介绍

热图 JS 是一款基于 JavaScript 的热力图库，通过将颜色映射到数据的相对强度来展示数据密度。它可以用于数据可视化、事件热力图、地图生成等领域。

特点

• 无依赖，可以与任何 JavaScript 框架集成使用；
• 灵活性高，可以通过传递自定义配置进行高度自定义操作；
• 轻量级，良好的性能和速度；
• 提供多种热图展示方式：Gradient、Radar、Stripe 等。

如何使用

安装

可以通过 npm 进行安装：

npm install heatmap.js --save

或者直接从 Github 下载 heatmap.js。

调用

在 HTML 中添加一个空白 div 作为容器。

<div id="heatmapContainer"></div>

在 JavaScript 中，引入 heatmap.js 相关

import 'heatmapjs';

然后，可以创建一个全局 h337 变量，这是 heatmap.js 的基本对象。要创建一个热图实例，您需要传递静态元素（可以是数组、坐标、像素等）和一组选项。

const heatmapInstance = h337.create({
  container: document.querySelector('#heatmapContainer'),
  radius: 20,
  maxOpacity: 0.8,
  blur: 0.9,
  gradient: {
    0.25: 'rgb(0,0,255)',
    0.55: 'rgb(0,255,0)',
    0.85: 'yellow',
    1.0: 'rgb(255,0,0)'
  },
});

现在就可以通过 heatmapInstance.setData(data) 添加数据到热图实例中啦！

配置选项

heatmap.js 有很多配置项可以用来控制生成热图的外观和行为。以下是一些可能用到的配置项：

• container: 用于加热的容器元素
• minOpacity: 最小透明度
• maxOpacity: 最大透明度
• blur: 接受的点的半径大小，相当于从一点 "涂色" 到接近它的所有点的距离
• radius
• gradient: 热图渐变色
• backgroundColor
• opacity: 热图画布的不透明度

更多配置项可以在 官方文档 中查看。

结论

热图 JS 是一个功能强大且灵活的热图库，它可以用于数据可视化、事件热力图、地图生成等领域。它易于使用、轻量级，还具有良好的性能和速度，可以很好地满足各种需求。