syncfusion-angular-heatmap

用途

Syncfusion Angular HeatMap 组件用于在 Angular 应用中创建热力图，以颜色渐变或固定颜色表示二维数据中的数值，适合分析矩阵数据中的模式、相关性和分布。

主要能力

• 轴类型：支持数值轴、分类轴和日期时间轴。
• 数据绑定：支持 JSON 数组和二维矩阵格式，可通过 DataManager 绑定远程数据，并支持实时数据更新与动态绑定。
• 渲染模式：小数据量使用 SVG，大数据量自动切换到 Canvas。
• 交互功能：单元格选择、工具提示、数据标签和事件处理。
• 自定义：调色板、主题、单元格样式、边框、渐变与固定颜色。
• 无障碍：符合 WCAG，支持 ARIA 属性、键盘导航和屏幕阅读器。
• 图例：支持自动和自定义图例渲染。
• 气泡变体：提供气泡热力图可视化，可通过大小和颜色编码数据。
• 独立组件：兼容 Angular 19+ 独立组件。

使用方式

安装 @syncfusion/ej2-angular-heatmap 包，并在 Angular 独立组件或传统模块中导入 HeatMapModule。基本用法如下：

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

常见模式包括：销售绩效矩阵、时间序列活动热力图、交互式单元格选择、自定义工具提示与数据标签、气泡热力图变体。

适用场景

• 产品绩效仪表板：按产品展示季度销售指标，颜色强度表示绩效水平，点击单元格查看明细。
• 服务器活动监控：按小时和星期追踪 CPU/内存使用，使用日期时间轴，大数据集自动切换 Canvas。
• 相关性矩阵：可视化多个变量之间的统计相关性，颜色渐变表示相关强度，悬停显示精确值。
• 网站流量热力图：按页面和时间分析访客流量，气泡热力图显示流量规模，选择功能支持按时间段筛选。

限制

资料未提供关于收费、价格、平台兼容性、性能上限或具体效果保证的信息。