当前位置：首页 > 行业动态 > 正文

heatmap.js教程

heatmap.js教程：简易集成，可视化数据分布，支持多格式与交互，兼容主流

Heatmap.js是一款轻量级的JavaScript库，用于在网页中创建可视化热力图，它通过将数据点映射为颜色梯度，直观展示数据分布密度，广泛应用于用户行为分析、地理热力分布、数据可视化等领域，本文将从基础到进阶，系统讲解Heatmap.js的使用方法。

快速上手

安装与引入

方式1：通过CDN引入

<script src="https://cdn.jsdelivr.net/npm/heatmap.js@2.0.6/build/heatmap.min.js"></script>

方式2：通过npm安装

npm install heatmap.js

基础示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">Heatmap.js Demo</title>
  <style>
    #heatmap-container {
      width: 600px;
      height: 400px;
    }
  </style>
</head>
<body>
  <div id="heatmap-container"></div>
  <script src="path/to/heatmap.min.js"></script>
  <script>
    // 准备容器
    const container = document.getElementById('heatmap-container');
    // 生成测试数据（随机生成100个点）
    const data = [];
    for (let i = 0; i < 100; i++) {
      const x = Math.random()  600;
      const y = Math.random()  400;
      const value = Math.floor(Math.random()  100); // 数值越大颜色越深
      data.push({x, y, value});
    }
    // 创建热力图实例
    heatmapInstance = h337.create({
      container: container, // 容器元素
      radius: 50,          // 模糊半径
      maxOpacity: 0.8,     // 最大透明度
      minOpacity: 0.2,     // 最小透明度
      blur: 0.75,         // 模糊程度
       gradient: {        // 自定义渐变色
        '0.4': 'blue',
        '0.6': 'rgb(100, 200, 255)',
        '0.8': 'red'
       }
    });
    // 设置数据
    heatmapInstance.setData({
      max: 100,            // 数据最大值（用于归一化）
      min: 0,              // 数据最小值
      data: data          // 数据数组
    });
  </script>
</body>
</html>

核心配置项详解

配置项 类型 默认值 说明
container HTMLElement/String 必填 热力图渲染的容器元素或ID字符串
radius Number 默认值动态计算 高斯模糊半径（值越大，热力点越扩散）
visible Boolean true 是否立即显示热力图
opacity Number 0 整体透明度（0-1）
gradient Object 默认渐变色 自定义颜色渐变（键为归一化阈值，值为颜色值）
blendMode String overlay 混合模式（如overlay、lighten等）
bezier String/Array linear 贝塞尔曲线控制（如curved或自定义控制点数组）

进阶功能实现

动态更新数据

// 模拟实时数据更新（每2秒重新生成数据）
setInterval(() => {
  const newData = [];
  for (let i = 0; i < 100; i++) {
    newData.push({
      x: Math.random()  600,
      y: Math.random()  400,
      value: Math.random()  100
    });
  }
  heatmapInstance.setData({
    max: 100,
    min: 0,
    data: newData
  });
}, 2000);

事件监听

heatmapInstance.addEventListener('click', (event) => {
  console.log('点击坐标：', event.coordinates); // 输出点击位置的归一化坐标（0-1范围）
});

与地图结合

<!-引入Leaflet地图库 -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
  // 初始化地图
  const map = L.map('map').setView([39.9, 116.4], 12); // 北京坐标
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
  // 转换地理坐标为像素坐标
  function geoToPixel(lat, lng) {
    const point = map.latLngToContainerPoint(L.latLng(lat, lng));
    return {x: point.x, y: point.y};
  }
  // 生成地理热力数据（天安门周边随机点）
  const geoData = [];
  for (let i = 0; i < 500; i++) {
    const lat = 39.9 + (Math.random() 0.5)  0.02;
    const lng = 116.4 + (Math.random() 0.5)  0.02;
    geoData.push(geoToPixel(lat, lng));
  }
  // 创建热力图覆盖层
  const heat = L.heatLayer(geoData, {radius: 25, blur: 15}).addTo(map);
</script>

性能优化技巧

  1. 数据抽样：对高密度数据进行抽稀处理（如每隔5个点取1个）
  2. Canvas模式：使用h337.create({..., useCanvas: true})启用Canvas渲染加速
  3. WebWorker处理：将复杂计算任务移至Worker线程（需自行实现）
  4. 热力图分层：将大区域拆分为多个小热力图实例渲染

常见问题解决方案

问题描述 解决方案
热力图不显示 检查容器尺寸是否为0、数据是否为空、坐标是否超出容器范围
颜色显示异常 确认gradient配置是否正确，检查数据max/min值是否合理
移动端触摸不响应 添加user-select: none样式，防止长按触发系统复制菜单
与其它图层重叠问题 调整z-index层级或使用blendMode设置为multiply等混合模式

FAQs

Q1：如何在已有的ECharts图表上叠加热力图？
A：需将ECharts的dom元素作为Heatmap.js的容器，并设置z-index确保层级正确，注意坐标系转换，ECharts的[0,0]通常对应左上角，而Heatmap.js采用[0,0]为左下角的标准,可能需要进行坐标反转。

Q2：热力图在低版本IE浏览器中无法显示怎么办？
A：Heatmap.js依赖现代浏览器特性（如Canvas），建议通过以下方式处理：

  1. 检测浏览器版本，低于IE10时提示升级或降级方案
  2. 使用Polyfill填充部分API（如requestAnimationFrame）
  3. 改用兼容IE的替代方案（如基于SVG的热力图库）
js教程数据可视化
0

相关文章