SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场syncfusion-angular-treemap

syncfusion-angular-treemap

前端与建站

查看项目

更新于 10-15 15:37

技能介绍

用途

Syncfusion Angular TreeMap 组件将层级或分组数据渲染为嵌套矩形。每个矩形代表一个数据项，其尺寸由通过 weightValuePath 映射的数值字段决定。适用于展示产品类别、区域分布、市场细分等需要体现相对量级的分组数据集。

当需要以下场景时可使用本技能：可视化层级数据（区域、部门、产品类别等分组或多级数据）；多级数据可视化（使用 levels 和 groupPath 展示父子关系）；创建下钻界面（在层级间进行交互式导航）；颜色编码数据（range、equal、desaturation、palette 或直接颜色绑定）；添加交互功能（选择、高亮、点击、双击、右键交互）；定制外观（布局、颜色、边框、标签、表头、图例与模板）；展示辅助信息（标签、工具提示、图例与格式化数值）；导出可视化（打印或导出为 PNG、JPEG、SVG 或 PDF）；国际化支持（RTL、区域特定数字格式与文化感知展示）；无障碍（屏幕阅读器支持、ARIA 命名、对比度与焦点行为）。

文档导航

可按需参考以下文档：API Reference 参见 references/api-reference.md；入门参见 references/getting-started.md（安装与 npm 包设置、导入 TreeMapModule、创建首个 TreeMap 组件、主题与样式配置、简单数据的基础组件）；数据绑定参见 references/data-binding.md（绑定扁平集合、使用 levels 分组、将数据源属性映射到 TreeMap 字段、配置 weightValuePath 决定项大小、动态数据更新与状态驱动绑定）；颜色映射参见 references/color-mapping.md（数值的 range 颜色映射、基于类别的 equal 颜色映射、带透明度的 desaturation 颜色映射、基于 palette 的着色、通过 colorValuePath 直接颜色绑定、使用 leafItemSettings.colorMapping 的渐变色）；下钻与导航参见 references/drilldown-and-navigation.md（启用下钻、使用 levels 的父子导航、drillDownView 行为、面包屑导航、drillStart 与 drillEnd 事件、按需通过应用状态重置到根节点）；层级与布局参见 references/levels-and-layout.md（配置多个层级、groupPath 与分组渲染、布局类型 Squarified / SliceAndDiceVertical / SliceAndDiceHorizontal / SliceAndDiceAuto、组间距与叶节点间隙、表头格式化与样式、表头模板与尺寸）；标签、工具提示与图例参见 references/labels-tooltips-legend.md（数据标签配置与格式化、标签模板与模板定位、标签相交与溢出的处理、工具提示可见性与格式化、自定义工具提示模板、图例展示与配置、图例与颜色映射/选择/高亮的协同）；选择与交互参见 references/selection-interactivity.md（启用选择与高亮、定制选择颜色与边框、基于图例的选择与悬停交互、点击/选中项/双击/右键事件、使用 selectItem(...) 进行程序化选择、在应用状态中管理单项或多选工作流）；打印、导出与无障碍参见 references/print-export-accessibility.md（打印功能、图片导出 PNG/JPEG/SVG、带方向选项的 PDF 导出、Base64 导出处理、WCAG 无障碍支持、屏幕阅读器支持与 ARIA 标签、对比度与焦点考虑）；国际化参见 references/internationalization.md（RTL 渲染、区域配置与数字格式化、标签与工具提示的全球化、渲染方向配置、多语言数据绑定、使用 setCulture() 与 setCurrencyCode() 进行文化定制）。

快速开始

import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      id="treemap-container"
      [dataSource]="data()"
      weightValuePath="Size"
      [levels]="levels"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `,
  styles: [`
    #treemap-container {
      display: block;
      width: 100%;
      height: 500px;
    }
  `]
})
export class TreeMapComponent {
  public data = signal([
    { Category: 'Electronics', Item: 'Laptops', Size: 150 },
    { Category: 'Electronics', Item: 'Phones', Size: 200 },
    { Category: 'Furniture', Item: 'Chairs', Size: 100 },
    { Category: 'Furniture', Item: 'Tables', Size: 120 }
  ]);

  public levels = [
    { groupPath: 'Category' }
  ];

  public leafItemSettings = {
    labelPath: 'Item',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };
}

常见模式

模式 1：基础层级可视化。使用 levels 和 groupPath 展示分组层级数据。

public levels = [
  { groupPath: 'Region', headerFormat: '${Region}' },
  { groupPath: 'Country', headerFormat: '${Country}' }
];

public leafItemSettings = {
  labelPath: 'Country'
};

模式 2：颜色映射数值。通过 rangeColorValuePath 与 leafItemSettings.colorMapping 使用范围颜色映射。

<ejs-treemap
  [dataSource]="data()"
  weightValuePath="Value"
  rangeColorValuePath="Value"
  [leafItemSettings]="leafItemSettings">
</ejs-treemap>

public leafItemSettings = {
  labelPath: 'Name',
  colorMapping: [
    { from: 0, to: 50, color: '#3498db' },
    { from: 50, to: 100, color: '#e74c3c' }
  ]
};

模式 3：交互式下钻。启用下钻并配合面包屑导航探索分组层级。

<ejs-treemap
  [dataSource]="data()"
  weightValuePath="Value"
  [enableDrillDown]="true"
  [enableBreadcrumb]="true"
  breadcrumbConnector=" / "
  [levels]="levels"
  [leafItemSettings]="leafItemSettings">
</ejs-treemap>

关键属性与配置

  • dataSource（object[]）：TreeMap 项的数据集合
  • weightValuePath（string）：用于决定每项尺寸的数值字段
  • leafItemSettings（object）：叶节点配置，如标签、边框、模板与颜色映射
  • levels（object[]）：使用 groupPath 与表头设置配置层级
  • layoutType（'Squarified' | 'SliceAndDiceVertical' | 'SliceAndDiceHorizontal' | 'SliceAndDiceAuto'）：矩形排列算法
  • colorValuePath（string）：用于直接分配项颜色的数据字段
  • equalColorValuePath（string）：用于基于类别颜色映射的数据字段
  • rangeColorValuePath（string）：用于数值范围颜色映射的数据字段
  • enableDrillDown（boolean）：启用通过分组层级的向下钻取导航
  • enableBreadcrumb（boolean）：在下钻期间显示面包屑导航
  • legendSettings（object）：图例展示与样式配置
  • tooltipSettings（object）：工具提示的可见性、格式化与模板配置
  • selectionSettings（object）：选择外观与行为配置
  • highlightSettings（object）：悬停高亮外观配置
  • enableRtl（boolean）：启用从右到左渲染
  • locale（string）：覆盖组件文化区域
  • format（string）：应用数字格式化，如 n2、c 或 p
  • useGroupingSeparator（boolean）：启用文化感知的数字分组分隔符
  • allowPrint（boolean）：启用打印支持
  • allowImageExport（boolean）：启用图片导出支持
  • allowPdfExport（boolean）：启用 PDF 导出支持
  • description（string）：为组件添加辅助功能描述文本
  • tabIndex（number）：控制 TreeMap 容器的焦点顺序

实现说明

对于专注的独立 Angular 组件，优先使用 TreeMapModule。仅在启用相应功能时使用 TreeMapLegendService、TreeMapTooltipService、TreeMapSelectionService、TreeMapHighlightService、PrintService、ImageExportService 与 PdfExportService。对于颜色映射，配置 leafItemSettings.colorMapping，并在需要时与 equalColorValuePath 或 rangeColorValuePath 搭配使用。对于程序化选择，使用 selectItem(levelOrder, isSelected?)，而非不受支持的辅助方法。对于无障碍，依赖 TreeMap 内置的 ARIA 支持、有意义的标题、标签、图例、描述与强颜色对比。对于键盘与高级交互工作流，在需要时提供周围的 Angular 控件，而不要假设存在未记录的额外 TreeMap 键盘 API。