热力图

热力图的简介

热力图是一种通过颜色强度映射二维数据密度或数值大小的可视化图表，擅长揭示数据分布规律、聚类特征及异常点。热力图将两个分类/连续字段（如 x、y）映射为坐标轴，第三个数值字段（如 value）映射为颜色梯度，形成网格化的色块矩阵，通常冷色调（如蓝色）表示低值，暖色调（如红色）表示高值。

热力图特别适合展示大量数据点的分布特征，通过颜色的变化可以直观地反映数据集中的密度或强度变化，帮助识别数据中的模式和关系。在展示多维数据时，热力图比条形图或散点图更加直观，能够一目了然地显示数据的聚集区域和稀疏区域。

热力图广泛应用于地理空间分析、网站用户行为研究、科学研究中的相关性分析等多种场景。

英文名：Heatmap, Heat Map

热力图的构成

边界未经平滑处理的热力图

图表类型	边界未经平滑处理的热力图
适合的数据	三个连续字段
功能	观察数据的分布情况
数据与图形的映射	两个连续字段分别映射到 x 轴、y 轴。一个连续元数据映射到颜色
适合的数据条数	超过 30 条数据

边界经平滑处理的热力图

图表类型	边界经平滑处理的热力图
适合的数据	三个连续字段
功能	展示数据的分布情况，加上统计算法可预测未知区域数据
数据与图形的映射	两个连续字段分别映射到 x 轴、y 轴。一个连续元数据映射到颜色
适合的数据条数	超过 30 条数据

热力图的应用场景

适合的场景

例 1: 适合展示二维数据的分布密度

下面这张热力图展示了二维空间上的温度分布情况。通过颜色的变化可以直观地看出不同区域的温度差异。

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  autoFit: true,
  padding: 0,
});

chart.options({
  type: 'view',
  axis: false,
  children: [
    {
      type: 'image',
      style: {
        src: 'https://gw.alipayobjects.com/zos/rmsportal/NeUTMwKtPcPxIFNTWZOZ.png',
        x: '50%',
        y: '50%',
        width: '100%',
        height: '100%',
      },
      tooltip: false,
    },
    {
      type: 'heatmap',
      data: {
        type: 'fetch',
        value: 'https://assets.antv.antgroup.com/g2/heatmap.json',
      },
      encode: {
        x: 'g',
        y: 'l',
        color: 'tmp',
      },
      style: {
        opacity: 0,
      },
      tooltip: false,
    },
  ],
});

chart.render();

说明：

g 字段映射到 x 轴，l 字段映射到 y 轴，表示二维空间中的位置
tmp 字段映射到颜色，表示每个位置点的温度值
背景图像和热力叠加，直观展示温度分布情况

例 2: 适合展示散点数据的密度分布

密度热力图可以展示散点数据的集中区域，下面的例子展示了钻石数据集中克拉数和价格的分布关系。

import { Chart } from '@antv/g2';
import DataSet from '@antv/data-set';

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart.options({
  type: 'view',
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/diamond.json',
  },
  scale: {
    x: { nice: true, domainMin: -0.5 },
    y: { nice: true, domainMin: -2000 },
    color: { nice: true },
  },
  children: [
    {
      type: 'heatmap',
      data: {
        transform: [
          {
            type: 'custom',
            callback: (data) => {
              const dv = new DataSet.View().source(data);
              dv.transform({
                type: 'kernel-smooth.density',
                fields: ['carat', 'price'],
                as: ['carat', 'price', 'density'],
              });
              return dv.rows;
            },
          },
        ],
      },
      encode: {
        x: 'carat',
        y: 'price',
        color: 'density',
      },
      style: {
        opacity: 0.3,
        gradient: [
          [0, 'white'],
          [0.2, 'blue'],
          [0.4, 'cyan'],
          [0.6, 'lime'],
          [0.8, 'yellow'],
          [0.9, 'red'],
        ],
      },
    },
    {
      type: 'point',
      encode: {
        x: 'carat',
        y: 'price',
      },
    },
  ],
});

chart.render();

说明：

carat 字段和 price 字段分别映射到 x 轴和 y 轴
使用核密度估计（kernel density estimation）计算散点的密度分布
密度值映射到颜色，形成热力效果
叠加原始散点数据，可以同时观察数据点和密度分布

不适合的场景

例 1: 不适合精确比较具体数值

热力图通过颜色强度表现数值大小，但人眼对颜色的感知不如对长度的感知精确。如果需要准确比较具体数值，柱状图或折线图是更好的选择。

例 2: 不适合展示少量离散数据点

当数据点较少时，热力图的密度分布优势不明显，直接使用散点图可能更为清晰直观。

热力图的扩展

阈值热力图

阈值热力图根据预设的阈值区间，将连续数据划分为离散的颜色区间，适合强调特定范围内的数据。

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

// 生成模拟的二维网格数据
const data = [];
for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    data.push({
      x: i,
      y: j,
      value: Math.floor(Math.random() * 100),
    });
  }
}

chart.options({
  type: 'cell',
  data,
  encode: {
    x: 'x',
    y: 'y',
    color: 'value',
  },
  scale: {
    color: {
      type: 'threshold',
      domain: [25, 50, 75],
      range: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b'],
    },
  },
  style: {
    stroke: '#fff',
    lineWidth: 1,
  },
  label: {
    text: 'value',
    style: {
      fontSize: 10,
      fill: '#000',
    },
  },
});

chart.render();

说明：