Back to Details

syncfusion-angular-heatmap

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing HeatMap

实现热力图

The HeatMap Chart component is a powerful visualization tool for displaying two-dimensional data where values are represented through color gradients or fixed colors. Perfect for analyzing patterns, correlations, and distributions in matrix data, time-series heatmaps, and any scenario requiring color-encoded data representation.
HeatMap Chart组件是一款功能强大的可视化工具，用于展示二维数据，其中数值通过颜色渐变或固定颜色来表示。非常适合分析矩阵数据、时间序列热力图以及任何需要颜色编码数据展示场景中的模式、相关性和分布情况。

When to Use This Skill

何时使用此技能

  • Data Matrix Visualization: Display 2D data arrays with color-coded cells
  • Correlation Analysis: Visualize relationships between multiple variables
  • Time-Series Heatmaps: Show patterns over time (e.g., hourly/daily activity)
  • Category Comparison: Compare performance across categories and metrics
  • Intensity Mapping: Display heatmaps with gradient colors representing value intensity
  • Interactive Selection: Enable user selection of cells with tooltips and event handling
  • Accessibility Requirements: Implement WCAG-compliant heatmaps with ARIA support
  • Custom Styling: Apply themes, palettes, and custom rendering (SVG/Canvas)
  • Bubble Heatmaps: Visualize data as bubbles with size and color encoding
  • Large Datasets: Handle auto-switching between SVG and Canvas rendering modes
  • 数据矩阵可视化：通过颜色编码单元格展示二维数据数组
  • 相关性分析：可视化多个变量之间的关系
  • 时间序列热力图：展示随时间变化的模式（如每小时/每日活动）
  • 类别对比：跨类别和指标比较性能
  • 强度映射：展示带有代表数值强度的渐变颜色的热力图
  • 交互式选择：支持用户选择单元格，并提供工具提示和事件处理
  • 无障碍需求：实现符合WCAG标准的热力图，支持ARIA
  • 自定义样式：应用主题、调色板和自定义渲染（SVG/Canvas）
  • 气泡热力图：将数据可视化为带有大小和颜色编码的气泡
  • 大型数据集：支持在SVG和Canvas渲染模式间自动切换

Component Overview

组件概述

HeatMap is a flexible, high-performance visualization component with rich customization:
  • Axis Types: Numeric, Categorical, and DateTime axes
  • Data Binding: JSON arrays and 2D matrix formats
  • Rendering Modes: Auto-switching SVG (small data) and Canvas (large data)
  • Interactive Features: Cell selection, tooltips, data labels, events
  • Customization: Color palettes, themes, cell styling, borders
  • Accessibility: WCAG compliance, ARIA attributes, keyboard navigation
  • Legend Support: Automatic and custom legend rendering
  • Bubble Variant: Alternative bubble heatmap visualization
  • Standalone Ready: Compatible with Angular 19+ standalone components
HeatMap是一款灵活、高性能的可视化组件，具有丰富的自定义功能：
  • 坐标轴类型：数值型、分类型和日期时间型坐标轴
  • 数据绑定：JSON数组和二维矩阵格式
  • 渲染模式：自动切换SVG（小数据量）和Canvas（大数据量）模式
  • 交互功能：单元格选择、工具提示、数据标签、事件
  • 自定义配置：颜色调色板、主题、单元格样式、边框
  • 无障碍支持：符合WCAG标准、ARIA属性、键盘导航
  • 图例支持：自动和自定义图例渲染
  • 气泡变体：可选的气泡热力图可视化方式
  • 独立组件兼容：支持Angular 19+独立组件

Documentation and Navigation Guide

文档与导航指南

API Reference

API参考

📄 Read: references/api-reference.md
📄 阅读：references/api-reference.md

Getting Started & Installation

快速入门与安装

📄 Read: references/getting-started.md
  • Installing @syncfusion/ej2-angular-heatmap package
  • Module imports for Angular standalone and traditional modules
  • Creating your first heatmap
  • Basic data binding setup
  • Verifying installation works
📄 阅读：references/getting-started.md
  • 安装@syncfusion/ej2-angular-heatmap包
  • Angular独立组件和传统模块的导入配置
  • 创建你的第一个热力图
  • 基础数据绑定设置
  • 验证安装是否成功

Data Binding & Formats

数据绑定与格式

📄 Read: references/data-binding.md
  • JSON array format for structured data
  • 2D array format for matrix data
  • DataManager for remote data
  • Binding x/y axis fields
  • Live data updates and dynamic binding
📄 阅读：references/data-binding.md
  • 用于结构化数据的JSON数组格式
  • 用于矩阵数据的二维数组格式
  • 用于远程数据的DataManager
  • 绑定x/y轴字段
  • 实时数据更新与动态绑定

Axes Configuration

坐标轴配置

📄 Read: references/axes-configuration.md
  • X/Y axis types: Numeric, Categorical, DateTime
  • Axis labels, titles, and intervals
  • Inverted axes and opposed positions
  • Axis customization and properties
  • Working with date/time data
📄 阅读：references/axes-configuration.md
  • X/Y轴类型：数值型、分类型、日期时间型
  • 坐标轴标签、标题和间隔
  • 反转坐标轴和相对位置
  • 坐标轴自定义与属性设置
  • 日期/时间数据处理

Legend Rendering

图例渲染

📄 Read: references/legend-rendering.md
  • Legend positioning and alignment
  • Legend sizing and appearance
  • Custom legend data display
  • Interactive legend behavior
  • Legend label formatting
📄 阅读：references/legend-rendering.md
  • 图例定位与对齐
  • 图例尺寸与外观
  • 自定义图例数据展示
  • 交互式图例行为
  • 图例标签格式化

Visual Customization & Rendering

视觉自定义与渲染

📄 Read: references/visual-customization.md
  • Color palettes and themes
  • SVG vs Canvas rendering modes
  • Cell styling and borders
  • Gradient and fixed colors
  • Bubble heatmap variations
  • Responsive design
📄 阅读：references/visual-customization.md
  • 颜色调色板与主题
  • SVG与Canvas渲染模式对比
  • 单元格样式与边框
  • 渐变与固定颜色
  • 气泡热力图变体
  • 响应式设计

Interactivity, Events & Accessibility

交互性、事件与无障碍支持

📄 Read: references/interactivity-events.md
  • Cell selection modes and events
  • Tooltip customization and templating
  • Data labels and formatting
  • Cell click and selection handlers
  • WCAG accessibility compliance
  • ARIA attributes and keyboard navigation
  • Screen reader support
📄 阅读：references/interactivity-events.md
  • 单元格选择模式与事件
  • 工具提示自定义与模板
  • 数据标签与格式化
  • 单元格点击与选择处理器
  • 符合WCAG无障碍标准
  • ARIA属性与键盘导航
  • 屏幕阅读器支持

Advanced Features & How-tos

高级功能与操作指南

📄 Read: references/advanced-features.md
  • EJ1 to EJ2 migration guide
  • How-to: Custom tooltip templates
  • How-to: Legend customization
  • How-to: Performance optimization for large datasets
  • Combining selection with data updates
  • Multi-dimensional data representation
📄 阅读：references/advanced-features.md
  • EJ1到EJ2迁移指南
  • 操作指南：自定义工具提示模板
  • 操作指南：图例自定义
  • 操作指南：大型数据集性能优化
  • 选择功能与数据更新结合
  • 多维数据展示

Quick Start

快速开始

Minimal HeatMap Setup

最小化HeatMap配置

typescript
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'
    };
}
typescript
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'
    };
}

Common Patterns

常见模式

Pattern 1: Sales Performance Matrix

模式1：销售业绩矩阵

Display product sales by year with color gradient representing performance levels.
typescript
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' };
When: Comparing performance metrics across multiple dimensions
Why: Color-coded cells make patterns immediately visible
通过颜色渐变展示各产品年度销售业绩，颜色渐变代表业绩水平。
typescript
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' };
适用场景：跨多个维度比较业绩指标
优势：颜色编码单元格可让模式一目了然

Pattern 2: Time-Series Activity Heatmap

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

Show hourly or daily activity patterns with DateTime axis.
typescript
<ejs-heatmap [xAxis]='{ type: "DateTime", intervalType: "Days" }'
    [yAxis]='{ labels: ["12 AM", "1 AM", "2 AM", "3 AM"] }'>
</ejs-heatmap>
When: Analyzing time-based patterns (traffic, usage, activity)
Why: DateTime axis automatically formats and scales time data
使用日期时间轴展示每小时或每日活动模式。
typescript
<ejs-heatmap [xAxis]='{ type: "DateTime", intervalType: "Days" }'
    [yAxis]='{ labels: ["12 AM", "1 AM", "2 AM", "3 AM"] }'>
</ejs-heatmap>
适用场景：分析基于时间的模式（流量、使用情况、活动）
优势：日期时间轴可自动格式化和缩放时间数据

Pattern 3: Interactive Cell Selection

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

Enable users to select cells and respond to selection events.
typescript
<ejs-heatmap [cellSettings]='{ border: { width: 1 } }'
    (cellSelected)='onCellSelect($event)'
    [allowSelection]='true'>
</ejs-heatmap>

onCellSelect(event: any) {
    console.log('Selected cell:', event.cellCollection);
}
When: Building interactive dashboards with drill-down capability
Why: Selection events enable dynamic filtering and detail views
允许用户选择单元格并响应选择事件。
typescript
<ejs-heatmap [cellSettings]='{ border: { width: 1 } }'
    (cellSelected)='onCellSelect($event)'
    [allowSelection]='true'>
</ejs-heatmap>

onCellSelect(event: any) {
    console.log('Selected cell:', event.cellCollection);
}
适用场景：构建带有钻取功能的交互式仪表盘
优势：选择事件支持动态过滤和详情视图

Pattern 4: Custom Tooltip with Data Labels

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

Display detailed information on hover and within cells.
typescript
<ejs-heatmap [tooltip]='{ enable: true }'>
    <e-heatmap-cellsettings [showLabel]='true' 
        [labelFormat]='{ format: "{value}" }'>
    </e-heatmap-cellsettings>
</ejs-heatmap>
When: Users need detailed values without clicking
Why: Tooltips reduce cognitive load while maintaining clean appearance
在悬停时显示详细信息，并在单元格内展示数据标签。
typescript
<ejs-heatmap [tooltip]='{ enable: true }'>
    <e-heatmap-cellsettings [showLabel]='true' 
        [labelFormat]='{ format: "{value}" }'>
    </e-heatmap-cellsettings>
</ejs-heatmap>
适用场景：用户无需点击即可查看详细数值
优势：工具提示可降低认知负荷，同时保持界面简洁

Pattern 5: Bubble Heatmap Variation

模式5：气泡热力图变体

Use bubbles instead of cells for alternative visualization.
typescript
<ejs-heatmap [renderingMode]='BubbleHeatMap'>
    <e-heatmap-cellsettings showLabel='true' bubbleType='Size'>
    </e-heatmap-cellsettings>
</ejs-heatmap>
When: Emphasizing value magnitude through bubble size
Why: Bubble size adds an additional visual dimension
使用气泡替代单元格，实现另类可视化效果。
typescript
<ejs-heatmap [renderingMode]='BubbleHeatMap'>
    <e-heatmap-cellsettings showLabel='true' bubbleType='Size'>
    </e-heatmap-cellsettings>
</ejs-heatmap>
适用场景：通过气泡大小强调数值量级
优势：气泡大小增加了额外的视觉维度

Key Props

关键属性

Data and Axes

数据与坐标轴

  • dataSource
    : Array of data objects (JSON format)
  • xAxis
    : X-axis configuration (Labels, Numeric, DateTime)
  • yAxis
    : Y-axis configuration (Labels, Numeric, DateTime)
  • valueBound
    : Range of color gradient values [min, max]
  • cellSettings
    : Cell appearance and labels
  • dataSource
    ：数据对象数组（JSON格式）
  • xAxis
    ：X轴配置（标签型、数值型、日期时间型）
  • yAxis
    ：Y轴配置（标签型、数值型、日期时间型）
  • valueBound
    ：颜色渐变数值范围 [最小值, 最大值]
  • cellSettings
    ：单元格外观与标签设置

Legend and Display

图例与显示

  • legendSettings
    : Legend positioning, alignment, and appearance
  • palette
    : Color scheme array or predefined theme
  • title
    : Heatmap title
  • height
    , 
    width
    : Chart dimensions
  • legendSettings
    ：图例定位、对齐与外观设置
  • palette
    ：颜色方案数组或预定义主题
  • title
    ：热力图标题
  • height
    , 
    width
    ：图表尺寸

Interactivity

交互性

  • allowSelection
    : Enable/disable cell selection
  • cellSelected
    : Event fired on cell selection
  • cellRender
    : Customize cell appearance
  • cellHover
    : Hover event for cells
  • tooltipSettings
    : Tooltip display configuration
  • allowSelection
    ：启用/禁用单元格选择
  • cellSelected
    ：单元格选择时触发的事件
  • cellRender
    ：自定义单元格外观
  • cellHover
    ：单元格悬停事件
  • tooltipSettings
    ：工具提示显示配置

Rendering

渲染

  • renderingMode
    : SVG or Canvas mode
  • cellBorder
    : Cell border configuration
  • showGradientLegend
    : Display gradient legend
  • renderingMode
    ：SVG或Canvas模式
  • cellBorder
    ：单元格边框配置
  • showGradientLegend
    ：显示渐变图例

Common Use Cases

常见用例

Use Case 1: Product Performance Dashboard

用例1：产品业绩仪表盘

Display quarterly sales metrics across products using a heatmap. Color intensity shows performance level. Users click cells to see drill-down details.
使用热力图展示各产品季度销售指标，颜色强度代表业绩水平。用户可点击单元格查看钻取详情。

Use Case 2: Server Activity Monitor

用例2：服务器活动监控

Track server CPU/memory usage by hour of day and day of week. Time-series heatmap with DateTime axes. Auto-switching Canvas mode for large datasets.
按小时和星期跟踪服务器CPU/内存使用情况。采用带日期时间轴的时间序列热力图，针对大型数据集自动切换到Canvas模式。

Use Case 3: Correlation Matrix

用例3：相关性矩阵

Visualize statistical correlations between multiple variables. Color gradients represent correlation strength. Hover tooltips show exact values.
可视化多个变量之间的统计相关性，颜色渐变代表相关性强度。悬停工具提示显示精确数值。

Use Case 4: Website Traffic Heatmap

用例4：网站流量热力图

Analyze visitor traffic patterns by page and time. Bubble heatmap shows traffic volume. Selection enables filtering by time periods.
按页面和时间分析访客流量模式，气泡热力图展示流量规模，选择功能支持按时间段筛选。