syncfusion-react-heatmap

实现 Syncfusion React 热力图

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

何时使用此技能

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

文档和导航指南

入门

📄 阅读： references/getting-started.md

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

数据绑定和设置

📄 阅读： references/data-binding.md

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

坐标轴配置

📄 阅读： references/axes-configuration.md

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

图例、外观和样式

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

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

交互和选择

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

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

高级功能和事件

📄 阅读： references/advanced-features.md

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

API 参考

📄 阅读： references/api-reference.md

• 全面的组件 API：属性、方法、事件和模型架构
• 快速查找 cellSettings、legendSettings、paletteSettings、xAxis、yAxis、titleSettings、tooltipSettings 以及 export、print、clearSelection 等常用方法
• 适用场景： 添加或验证属性、连接事件或实现高级自定义设置

无障碍访问与故障排查

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

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

快速入门

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;

常见模式

模式 1：基本数据可视化

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

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

// 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>

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

// 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>

关键属性

属性	类型	用途	示例
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'

常见用例

1. 性能仪表板 - 展示各部门和时间段的指标
2. 相关性矩阵 - 可视化变量之间的关系
3. 活动热力图 - 展示按日期/小时划分的用户参与模式
4. 基因表达 - 使用颜色强度分析生物数据
5. 流量模式 - 可视化网络/网站流量分布
6. 调查结果 - 展示不同问题和人口统计群体的回答模式

---