syncfusion-angular-heatmap

实现热力图

热力图（HeatMap）图表组件是一款强大的可视化工具，可通过颜色渐变或固定颜色来表示数值，展示二维数据。它非常适合用于分析矩阵数据、时间序列热力图中的模式、相关性和分布，以及任何需要用颜色编码表示数据的场景。

何时使用此技能

• 数据矩阵可视化： 使用颜色编码的单元格展示二维数据数组
• 相关性分析： 可视化多个变量之间的关系
• 时间序列热力图： 展示随时间变化的模式（例如，按小时／天统计的活动）
• 类别比较： 比较不同类别和指标的表现
• 强度映射： 使用表示数值强度的渐变色展示热力图
• 交互式选择： 支持用户选择单元格，并提供工具提示和事件处理
• 无障碍要求： 实现符合 WCAG 标准并支持 ARIA 的热力图
• 自定义样式： 应用主题、调色板和自定义渲染（SVG／Canvas）
• 气泡热力图： 使用气泡的大小和颜色编码来可视化数据
• 大型数据集： 支持在 SVG 和 Canvas 渲染模式之间自动切换

组件概览

热力图是一款灵活且高性能的可视化组件，提供丰富的自定义选项：

• 坐标轴类型： 数值、类别和日期时间坐标轴
• 数据绑定： JSON 数组和二维矩阵格式
• 渲染模式： 自动切换 SVG（小型数据集）和 Canvas（大型数据集）
• 交互功能： 单元格选择、工具提示、数据标签和事件
• 自定义： 调色板、主题、单元格样式和边框
• 无障碍支持： 符合 WCAG 标准、ARIA 属性和键盘导航
• 图例支持： 自动渲染和自定义图例
• 气泡变体： 另一种气泡热力图可视化方式
• 可独立使用： 兼容 Angular 19+ 独立组件

文档与导航指南

API 参考

📄 阅读： references/api-reference.md

入门与安装

📄 阅读： references/getting-started.md

• 安装 @syncfusion/ej2-angular-heatmap 包
• Angular 独立组件和传统模块的模块导入
• 创建第一个热力图
• 设置基本数据绑定
• 验证安装是否成功

数据绑定与格式

📄 阅读： references/data-binding.md

• 结构化数据的 JSON 数组格式
• 矩阵数据的二维数组格式
• 用于远程数据的 DataManager
• 绑定 x／y 轴字段
• 实时数据更新和动态绑定

坐标轴配置

📄 阅读： references/axes-configuration.md

• X／Y 轴类型：数值、类别、日期时间
• 坐标轴标签、标题和间隔
• 反向坐标轴和对置位置
• 坐标轴自定义和属性
• 使用日期／时间数据

图例渲染

📄 阅读： references/legend-rendering.md

• 图例位置和对齐方式
• 图例尺寸和外观
• 自定义图例数据显示
• 交互式图例行为
• 图例标签格式设置

视觉自定义与渲染

📄 阅读： references/visual-customization.md

• 调色板和主题
• SVG 与 Canvas 渲染模式对比
• 单元格样式和边框
• 渐变色和固定颜色
• 气泡热力图变体
• 响应式设计

交互、事件与无障碍

📄 阅读： references/interactivity-events.md

• 单元格选择模式和事件
• 工具提示自定义和模板
• 数据标签和格式设置
• 单元格点击和选择处理程序
• 符合 WCAG 无障碍标准
• ARIA 属性和键盘导航
• 屏幕阅读器支持

高级功能与使用指南

📄 阅读： references/advanced-features.md

• EJ1 到 EJ2 迁移指南
• 使用指南：自定义工具提示模板
• 使用指南：图例自定义
• 使用指南：大型数据集的性能优化
• 将选择与数据更新结合使用
• 多维数据表示

快速入门

最简热图设置

import { Component, ViewEncapsulation } from '@angular/core';
import { HeatMapModule } from '@syncfusion/ej2-angular-heatmap';

@Component({
    imports: [HeatMapModule],
    standalone: true,
    selector: 'app-heatmap',
    template: `
        <ejs-heatmap id='heatmap-container' 
            [dataSource]='dataSource'
            [xAxis]='xAxis'
            [yAxis]='yAxis'>
        </ejs-heatmap>
    `,
    encapsulation: ViewEncapsulation.None
})
export class HeatMapComponent {
    dataSource: any[] = [
        { ProductName: 'Milk', Year: 2005, Sales: 21, Quarter: 'Q1' },
        { ProductName: 'Milk', Year: 2006, Sales: 22, Quarter: 'Q1' },
        { ProductName: 'Milk', Year: 2007, Sales: 23, Quarter: 'Q1' },
        { ProductName: 'Bread', Year: 2005, Sales: 18, Quarter: 'Q1' },
        { ProductName: 'Bread', Year: 2006, Sales: 19, Quarter: 'Q1' },
        { ProductName: 'Bread', Year: 2007, Sales: 20, Quarter: 'Q1' }
    ];

    xAxis: any = {
        labels: ['2005', '2006', '2007'],
        type: 'Labels',
        opposedPosition: true
    };

    yAxis: any = {
        labels: ['Milk', 'Bread'],
        type: 'Labels'
    };
}

常见模式

模式 1：销售业绩矩阵

按年份展示产品销售额，并通过颜色渐变表示业绩水平。

dataSource = [
    { Product: 'Product A', Year: 2020, Sales: 50 },
    { Product: 'Product A', Year: 2021, Sales: 75 },
    { Product: 'Product B', Year: 2020, Sales: 60 },
    { Product: 'Product B', Year: 2021, Sales: 85 }
];

xAxis = { labels: ['2020', '2021'], type: 'Labels' };
yAxis = { labels: ['Product A', 'Product B'], type: 'Labels' };

适用场景： 比较多个维度的业绩指标
原因： 颜色编码的单元格能让模式一目了然

模式 2：时间序列活动热图

使用 DateTime 轴展示每小时或每天的活动模式。

<ejs-heatmap [xAxis]='{ type: "DateTime", intervalType: "Days" }'
    [yAxis]='{ labels: ["12 AM", "1 AM", "2 AM", "3 AM"] }'>
</ejs-heatmap>

适用场景： 分析基于时间的模式（流量、使用情况、活动）
原因： DateTime 轴会自动格式化和缩放时间数据

模式 3：交互式单元格选择

允许用户选择单元格并响应选择事件。

<ejs-heatmap [cellSettings]='{ border: { width: 1 } }'
    (cellSelected)='onCellSelect($event)'
    [allowSelection]='true'>
</ejs-heatmap>

onCellSelect(event: any) {
    console.log('Selected cell:', event.cellCollection);
}

适用场景： 构建支持下钻功能的交互式仪表板
原因： 选择事件可实现动态筛选和详细信息视图

模式 4：带数据标签的自定义工具提示

在悬停时和单元格内显示详细信息。

<ejs-heatmap [tooltip]='{ enable: true }'>
    <e-heatmap-cellsettings [showLabel]='true' 
        [labelFormat]='{ format: "{value}" }'>
    </e-heatmap-cellsettings>
</ejs-heatmap>

适用场景： 用户无需点击即可查看详细数值
原因： 工具提示可减少认知负担，同时保持界面简洁

模式 5：气泡热图变体

使用气泡代替单元格，呈现不同的可视化效果。

<ejs-heatmap [renderingMode]='BubbleHeatMap'>
    <e-heatmap-cellsettings showLabel='true' bubbleType='Size'>
    </e-heatmap-cellsettings>
</ejs-heatmap>

适用场景： 通过气泡大小突出数值大小
原因： 气泡大小增加了一个额外的视觉维度

关键属性

数据与坐标轴

• dataSource：数据对象数组（JSON 格式）
• xAxis：X 轴配置（Labels、Numeric、DateTime）
• yAxis：Y 轴配置（Labels、Numeric、DateTime）
• valueBound：颜色渐变值的范围 [min, max]
• cellSettings：单元格外观和标签

图例与显示

• legendSettings：图例位置、对齐方式和外观
• palette：配色方案数组或预定义主题
• title：热图标题
• height、width：图表尺寸

交互性

• allowSelection：启用/禁用单元格选择
• cellSelected：单元格选择时触发的事件
• cellRender：自定义单元格外观
• cellHover：单元格悬停事件
• tooltipSettings：工具提示显示配置

渲染

• renderingMode：SVG 或 Canvas 模式
• cellBorder：单元格边框配置
• showGradientLegend：显示渐变图例

常见用例

用例 1：产品业绩仪表板

使用热图展示各产品的季度销售指标。颜色深浅表示业绩水平。用户点击单元格即可查看下钻详情。

用例 2：服务器活动监控器

按一天中的小时和星期几跟踪服务器 CPU/内存使用情况。使用带 DateTime 坐标轴的时间序列热图。对于大型数据集，自动切换到 Canvas 模式。

用例 3：相关性矩阵

可视化多个变量之间的统计相关性。颜色渐变表示相关强度。悬停工具提示会显示精确数值。

用例 4：网站流量热图

按页面和时间分析访客流量模式。气泡热图展示流量。选择功能支持按时间段筛选。