syncfusion-react-heatmap

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion React HeatMap Chart

实现Syncfusion React HeatMap Chart

The HeatMap component visualizes two-dimensional data using color gradients or fixed colors, making it ideal for analyzing patterns, correlations, and distributions across matrix data. Perfect for displaying heat patterns, activity matrices, performance data, and temporal correlations.

HeatMap组件使用颜色渐变或固定颜色可视化二维数据，非常适合分析矩阵数据中的模式、相关性和分布情况。可完美展示热力模式、活动矩阵、性能数据以及时间相关性。

When to Use This Skill

何时使用此技能

Visualizing 2D data patterns - Display matrix data with color-coded cells
Creating heatmaps - Build interactive heatmaps with custom color schemes
Analyzing correlations - Show relationships between row and column variables
Displaying time-series patterns - Visualize activity over time periods
Performance monitoring - Display metrics across multiple dimensions
Data exploration - Reveal patterns in large datasets at a glance
Configuring axes - Set up numerical, categorical, or datetime axes
Customizing appearance - Apply custom colors, legends, and styling
Handling user interaction - Implement selection, tooltips, and event handling
Accessibility - Ensure keyboard navigation and screen reader support

可视化二维数据模式 - 用颜色编码的单元格展示矩阵数据
创建热力图 - 构建带有自定义配色方案的交互式热力图
分析相关性 - 展示行与列变量之间的关系
展示时间序列模式 - 可视化不同时间段的活动情况
性能监控 - 跨多维度展示指标数据
数据探索 - 快速揭示大型数据集中的模式
配置坐标轴 - 设置数值型、分类型或日期时间型坐标轴
定制外观 - 应用自定义颜色、图例和样式
处理用户交互 - 实现选择、工具提示和事件处理
无障碍访问 - 确保键盘导航和屏幕阅读器支持

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Installation and setup steps
Vite/React project configuration
CSS imports and theme selection
Basic component initialization
When: Starting a new HeatMap implementation or setting up dependencies

📄 阅读： references/getting-started.md

安装和设置步骤
Vite/React项目配置
CSS导入和主题选择
基础组件初始化
适用场景： 开始新的HeatMap实现或设置依赖项时

Data Binding & Setup

数据绑定与设置

📄 Read: references/data-binding.md

JSON data format and structure
2D array binding
Data transformation techniques
Loading and binding data dynamically
When: Preparing data for the heatmap or learning data formats

📄 阅读： references/data-binding.md

JSON数据格式与结构
二维数组绑定
数据转换技巧
动态加载和绑定数据
适用场景： 为热力图准备数据或学习数据格式时

Axes Configuration

坐标轴配置

📄 Read: references/axes-configuration.md

Numerical, categorical, and datetime axis types
Axis properties and customization
Inverted and opposed axis positioning
Axis intervals and label formatting
When: Setting up row/column headers or configuring axis behavior

📄 阅读： references/axes-configuration.md

数值型、分类型和日期时间型坐标轴类型
坐标轴属性与定制
反转和对立坐标轴定位
坐标轴间隔和标签格式化
适用场景： 设置行/列标题或配置坐标轴行为时

Legend, Appearance & Styling

图例、外观与样式

📄 Read: references/legend-and-appearance.md

Legend placement, format, and customization
Color palettes and gradient configuration
Sizing and dimension properties
Rendering modes (SVG vs Canvas switching)
Theme styling and CSS customization
When: Customizing visual appearance, colors, or legends

📄 阅读： references/legend-and-appearance.md

图例位置、格式与定制
调色板和渐变配置
尺寸和维度属性
渲染模式切换（SVG与Canvas）
主题样式和CSS定制
适用场景： 定制视觉外观、颜色或图例时

Interaction & Selection

交互与选择

📄 Read: references/interaction-and-selection.md

Selection modes and cell highlighting
Mouse events and event handlers
Tooltip configuration and customization
Cell interaction patterns and best practices
When: Implementing user interaction or handling cell clicks/hovers

📄 阅读： references/interaction-and-selection.md

选择模式和单元格高亮
鼠标事件和事件处理程序
工具提示配置与定制
单元格交互模式和最佳实践
适用场景： 实现用户交互或处理单元格点击/悬停时

Advanced Features & Events

高级功能与事件

📄 Read: references/advanced-features.md

Bubble heatmap implementation
Complete event handling (select, click, hover, created)
Automatic rendering mode switching
Performance optimization for large datasets
Custom rendering and cell styling
When: Implementing advanced features or optimizing performance

📄 阅读： references/advanced-features.md

气泡热力图实现
完整事件处理（选择、点击、悬停、创建）
自动渲染模式切换
大型数据集的性能优化
自定义渲染和单元格样式
适用场景： 实现高级功能或优化性能时

API Reference

API参考

📄 Read: references/api-reference.md

Comprehensive component API: props, methods, events, and model schemas

Quick lookup for

cellSettings

legendSettings

paletteSettings

xAxis

yAxis

titleSettings

tooltipSettings

, and common methods like

export

print

clearSelection

When: Adding or validating props, wiring events, or implementing advanced customizations

📄 阅读： references/api-reference.md

全面的组件API：属性、方法、事件和模型架构

cellSettings

、

legendSettings

、

paletteSettings

、

xAxis

、

yAxis

、

titleSettings

、

tooltipSettings

等的快速查询，以及

export

、

print

、

clearSelection

等常用方法

适用场景： 添加或验证属性、绑定事件或实现高级定制时

Accessibility & Troubleshooting

无障碍访问与故障排除

📄 Read: references/accessibility-and-troubleshooting.md

WCAG compliance and accessibility features
Keyboard navigation support
ARIA attributes and screen reader support
Common issues and solutions
Migration from EJ1 to EJ2
When: Ensuring accessibility or resolving issues

📄 阅读： references/accessibility-and-troubleshooting.md

WCAG合规性和无障碍功能
键盘导航支持
ARIA属性和屏幕阅读器支持
常见问题与解决方案
从EJ1迁移到EJ2
适用场景： 确保无障碍访问或解决问题时

Quick Start

快速开始

jsx

import * as React from 'react';
import { HeatMapComponent, Inject, Legend, Tooltip } from '@syncfusion/ej2-react-heatmap';
import '@syncfusion/ej2-base/styles/material.css';

export function App() {
  const data = [
    [73, 39, 26, 39, 94],
    [93, 58, 53, 38, 26],
    [54, 39, 26, 40, 42]
  ];

  return (
    <HeatMapComponent 
      id='heatmap'
      dataSource={data}
      xAxis={{ labels: ['A', 'B', 'C', 'D', 'E'] }}
      yAxis={{ labels: ['X', 'Y', 'Z'] }}
      showTooltip={true}
      cellRender={(args) => {
        args.displayText = args.value + '%';
      }}
    >
      <Inject services={[Legend, Tooltip]} />
    </HeatMapComponent>
  );
}

export default App;

jsx

import * as React from 'react';
import { HeatMapComponent, Inject, Legend, Tooltip } from '@syncfusion/ej2-react-heatmap';
import '@syncfusion/ej2-base/styles/material.css';

export function App() {
  const data = [
    [73, 39, 26, 39, 94],
    [93, 58, 53, 38, 26],
    [54, 39, 26, 40, 42]
  ];

  return (
    <HeatMapComponent 
      id='heatmap'
      dataSource={data}
      xAxis={{ labels: ['A', 'B', 'C', 'D', 'E'] }}
      yAxis={{ labels: ['X', 'Y', 'Z'] }}
      showTooltip={true}
      cellRender={(args) => {
        args.displayText = args.value + '%';
      }}
    >
      <Inject services={[Legend, Tooltip]} />
    </HeatMapComponent>
  );
}

export default App;

Common Patterns

常见模式

Pattern 1: Basic Data Visualization

模式1：基础数据可视化

jsx

// Visualize simple 2D data with default styling
<HeatMapComponent 
  dataSource={data}
  xAxis={{ labels: xLabels }}
  yAxis={{ labels: yLabels }}
>
  <Inject services={[Legend, Tooltip]} />
</HeatMapComponent>

jsx

// Visualize simple 2D data with default styling
<HeatMapComponent 
  dataSource={data}
  xAxis={{ labels: xLabels }}
  yAxis={{ labels: yLabels }}
>
  <Inject services={[Legend, Tooltip]} />
</HeatMapComponent>

Pattern 2: Custom Colors, Legend, and Tooltips

模式2：自定义颜色、图例和工具提示

jsx

// Apply custom color palette with legend and styled tooltips
<HeatMapComponent 
  dataSource={data}
  paletteSettings={{
    type: 'Gradient',
    palette: [
      { value: 0, color: '#3498db' },
      { value: 50, color: '#2ecc71' },
      { value: 100, color: '#e74c3c' }
    ]
  }}
  legendSettings={{ position: 'Right', width: '150px' }}
  showTooltip={true}
  tooltipSettings={{
    fill: '#F5F5F5',
    textStyle: { color: '#333333', size: '13px' },
    border: { width: 1, color: '#999999' }
  }}
>
  <Inject services={[Legend, Tooltip]} />
</HeatMapComponent>

jsx

// Apply custom color palette with legend and styled tooltips
<HeatMapComponent 
  dataSource={data}
  paletteSettings={{
    type: 'Gradient',
    palette: [
      { value: 0, color: '#3498db' },
      { value: 50, color: '#2ecc71' },
      { value: 100, color: '#e74c3c' }
    ]
  }}
  legendSettings={{ position: 'Right', width: '150px' }}
  showTooltip={true}
  tooltipSettings={{
    fill: '#F5F5F5',
    textStyle: { color: '#333333', size: '13px' },
    border: { width: 1, color: '#999999' }
  }}
>
  <Inject services={[Legend, Tooltip]} />
</HeatMapComponent>

Pattern 3: Interactive Cell Handling

模式3：交互式单元格处理

jsx

// Handle cell selection and display selected data
<HeatMapComponent 
  dataSource={data}
  cellSelected={(args) => {
    console.log(`Cell [${args.row}, ${args.column}] selected: ${args.value}`);
  }}
  cellRender={(args) => {
    args.displayText = args.value + ' units';
  }}
>
  <Inject services={[Legend, Tooltip]} />
</HeatMapComponent>

jsx

// Handle cell selection and display selected data
<HeatMapComponent 
  dataSource={data}
  cellSelected={(args) => {
    console.log(`Cell [${args.row}, ${args.column}] selected: ${args.value}`);
  }}
  cellRender={(args) => {
    args.displayText = args.value + ' units';
  }}
>
  <Inject services={[Legend, Tooltip]} />
</HeatMapComponent>

Key Props

关键属性

Prop	Type	Purpose	Example
`dataSource`	Array	2D data array or JSON	`[[1,2],[3,4]]`
`xAxis`	Object	Column axis configuration	`{ labels: ['A', 'B'] }`
`yAxis`	Object	Row axis configuration	`{ labels: ['X', 'Y'] }`
`paletteSettings`	Object	Color palette and gradient configuration	`{ type: 'Gradient', palette: [{value: 0, color: '#blue'}] }`
`cellRender`	Function	Custom cell formatting	Format display text
`cellSelected`	Function	Selection event handler	Track user selection
`legendSettings`	Object	Legend placement/format	`{ position: 'Right' }`
`showTooltip`	Boolean	Enable/disable tooltips	`true` or `false`
`tooltipSettings`	Object	Tooltip styling (fill, textStyle, border)	`{ fill: '#F5F5F5', textStyle: { color: '#333' } }`
`renderingMode`	String	SVG or Canvas	`'Canvas'` for large datasets

属性	类型	用途	示例
`dataSource`	Array	二维数据数组或JSON	`[[1,2],[3,4]]`
`xAxis`	Object	列坐标轴配置	`{ labels: ['A', 'B'] }`
`yAxis`	Object	行坐标轴配置	`{ labels: ['X', 'Y'] }`
`paletteSettings`	Object	调色板和渐变配置	`{ type: 'Gradient', palette: [{value: 0, color: '#blue'}] }`
`cellRender`	Function	自定义单元格格式化	格式化显示文本
`cellSelected`	Function	选择事件处理程序	跟踪用户选择
`legendSettings`	Object	图例位置/格式	`{ position: 'Right' }`
`showTooltip`	Boolean	启用/禁用工具提示	`true` 或 `false`
`tooltipSettings`	Object	工具提示样式（填充、文本样式、边框）	`{ fill: '#F5F5F5', textStyle: { color: '#333' } }`
`renderingMode`	String	SVG或Canvas	`'Canvas'` 适用于大型数据集

Common Use Cases

常见使用场景

Performance Dashboard - Display metrics across departments and time periods
Correlation Matrix - Visualize relationships between variables
Activity Heatmap - Show user engagement patterns by day/hour
Gene Expression - Analyze biological data with color intensity
Traffic Pattern - Visualize network/website traffic distribution
Survey Results - Display response patterns across questions and demographics

性能仪表盘 - 跨部门和时间段展示指标数据
相关矩阵 - 可视化变量之间的关系
活动热力图 - 按天/小时展示用户参与模式
基因表达 - 用颜色强度分析生物数据
流量模式 - 可视化网络/网站流量分布
调查结果 - 展示跨问题和人口统计的响应模式