syncfusion-react-heatmap

用途

Syncfusion React HeatMap 组件用于在 React 应用中实现热力图（HeatMap Chart）数据可视化。它通过颜色渐变或固定颜色对二维矩阵数据进行编码，便于分析数据中的模式、相关性和分布，适合展示热力模式、活动矩阵、性能数据以及时间维度上的相关性。

主要能力

数据可视化：以颜色编码单元格呈现二维数据模式，支持矩阵数据、行与列变量之间的关系、随时间变化的活动模式、多维指标以及大规模数据集中的模式探索。
数据绑定：支持 JSON 数据格式与结构、二维数组绑定、数据转换技术，以及动态加载和绑定数据。
轴配置：支持数值轴、分类轴和日期时间轴，可配置轴属性、反转与对置轴位置、轴间隔与标签格式。
图例、外观与样式：支持图例位置、格式与自定义，调色板与渐变配置，尺寸与维度属性，渲染模式（SVG 与 Canvas 切换），以及主题样式和 CSS 自定义。
交互与选择：支持选择模式与单元格高亮，鼠标事件与事件处理器，工具提示配置与自定义，以及单元格交互模式。
高级功能与事件：支持气泡热力图、完整事件处理（select、click、hover、created）、自动渲染模式切换、大数据集性能优化，以及自定义渲染与单元格样式。
API 参考：提供组件 API（属性、方法、事件和模型 schema）的快速查询，涵盖 cellSettings、legendSettings、paletteSettings、xAxis、yAxis、titleSettings、tooltipSettings，以及 export、print、clearSelection 等常用方法。
无障碍与故障排除：涵盖 WCAG 合规性、键盘导航、ARIA 属性与屏幕阅读器支持，常见问题与解决方案，以及从 EJ1 迁移到 EJ2。

使用方式

先安装依赖并完成项目配置，引入所需 CSS 主题，再进行组件初始化。官方快速开始示例：

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;

常用模式包括：基础数据可视化（使用默认样式展示简单二维数据）；自定义颜色、图例与工具提示（应用自定义渐变调色板、图例位置和工具提示样式）；交互式单元格处理（处理单元格选择并展示所选数据）。

关键属性包括：

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

文档导航按以下主题分篇：入门（安装与设置、项目配置、CSS 导入与主题选择、基础组件初始化）、数据绑定与设置、轴配置、图例外观与样式、交互与选择、高级功能与事件、API 参考、无障碍与故障排除。每篇均说明了适用时机。

适用场景

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

限制

资料中未提供具体的收费、价格、平台限制、性能上限或效果保证；如需这些信息，暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制