syncfusion-aspnetcore-treemap

Name: syncfusion-aspnetcore-treemap
Author: syncfusion

github.com/syncfusion设计与 UI051 次安装2 周前更新

代码仓库

关于 syncfusion-aspnetcore-treemap

面向 ASP.NET Core 开发者的 Syncfusion TreeMap 技能，用嵌套矩形展示层级数据及数值大小。指南涵盖多种布局、颜色映射、下钻交互以及导出和无障碍功能。

主要功能

01以矩形面积表示数值
02组织多层级数据
03提供多种布局算法
04按数值或类别映射颜色
05下钻、选择与高亮
06打印及图像和 PDF 导出

适用场景

01展示预算或销售分布
02探索区域人口层级
03分析市场细分数据
04查看分组指标的数值差异

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-treemap

安装后在 Claude Code 中输入/syncfusion-aspnetcore-treemap确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/

advanced-customization.md

api-reference.md

color-mapping.md

data-binding.md

data-labels-and-tooltips.md

getting-started.md

interactive-features.md

layouts.md

leaf-items.md

levels-and-hierarchy.md

print-export-accessibility.md

详细介绍

在 ASP.NET Core 中实现 Syncfusion TreeMap

Syncfusion TreeMap 控件使用嵌套矩形可视化层次结构数据，其中每个项的面积代表其数值。它适用于展示组织结构、预算分布、细分市场、人口分布、销售业绩，或任何需要按大小进行可视化表示的层次结构数据集。

何时使用此技能

在以下情况下使用 TreeMap 技能：

可视化多级层次结构数据，例如洲 → 国家 → 城市。
展示嵌套类别，其中矩形大小代表数值。
启用下钻探索，让用户能够浏览不同层次。
应用颜色映射以展示数值范围、类别或性能指标。
添加交互功能，例如选择、高亮、工具提示和图例。
创建多级显示，并使用自定义标题、分组和标签格式。

组件概述

TreeMap 控件使用 SVG 将层次结构数据呈现为嵌套矩形。它支持：

多种布局类型，例如 Squarified、SliceAndDiceVertical、SliceAndDiceHorizontal 和 SliceAndDiceAuto。
使用 groupPath 组织扁平数据并构成可视分组的层次结构层级。
使用基于范围、基于相等值／类别、去饱和度、不透明度或基于调色板的配置进行颜色映射。
从父分组导航到子分组的交互式下钻。
用于显示上下文信息的数据标签和工具提示。
用于用户交互的选择和高亮模式。
支持 PNG、JPEG、SVG 和 PDF 输出的打印和导出功能。
支持键盘交互并提供适合屏幕阅读器的呈现方式的无障碍功能。

文档与导航指南

快速入门

📄 阅读： references/getting-started.md

安装和包设置
在 ASP.NET Core 中注册 Syncfusion 服务
创建第一个 TreeMap 控件
基本数据绑定和呈现
常见初始配置

数据组织

📄 阅读： references/data-binding.md

扁平集合数据绑定
层次结构集合数据绑定
数据源字段映射模式
数据结构最佳实践
通过 weightValuePath 映射值字段

视觉布局

📄 阅读： references/layouts.md

Squarified 和 Slice-and-Dice 变体等布局类型
为数据选择合适的布局
从右到左的呈现支持
呈现方向和布局行为

层次结构

📄 阅读： references/levels-and-hierarchy.md

使用 groupPath 构建多级层次结构
使用 headerFormat 自定义标题
组间空隙和间距
标题模板和定位

叶项（叶级显示）

📄 阅读： references/leaf-items.md

叶项的渲染和外观
标签定位和格式设置
标签模板和自定义
项目间空隙和间距

颜色映射策略

📄 阅读： references/color-mapping.md

对连续数值使用范围颜色映射
对离散类别使用等值颜色映射
基于降低饱和度和不透明度的映射
使用数据中的调色板和直接颜色绑定

数据显示（标签和工具提示）

📄 阅读： references/data-labels-and-tooltips.md

数据标签格式设置和模板
标签交叉处理
工具提示的显示和格式设置
工具提示模板和自定义内容

交互功能

📄 阅读： references/interactive-features.md

选择模式和自定义
高亮行为和样式
下钻功能
面包屑式导航行为
按需加载数据以提升性能的模式

发布和无障碍功能

📄 阅读： references/print-export-accessibility.md

打印功能
将图像导出为 PNG、JPEG 和 SVG
使用方向设置导出 PDF
导出 Base64 以供编程使用
无障碍功能和屏幕阅读器支持

高级自定义

📄 阅读： references/advanced-customization.md

国际化和数字格式设置
图例自定义和交互模式
真实场景中的自定义模式
从旧版 API 迁移的指南

快速入门示例

@page
@using Syncfusion.EJ2.TreeMap

@{
    List<TreeMapData> data = new List<TreeMapData>
    {
        new TreeMapData { Name = "Electronics", Category = "Tech", Sales = 5000 },
        new TreeMapData { Name = "Furniture", Category = "Home", Sales = 3000 }
    };

    ViewBag.data = data;
}

<ejs-treemap id="treemap"
             dataSource="ViewBag.data"
             weightValuePath="Sales"
             layoutType="Squarified">
    <e-treemap-leafitemsettings labelPath="Name">
    </e-treemap-leafitemsettings>
    <e-treemap-levels>
        <e-treemap-level groupPath="Category"
                         headerFormat="${Category}"
                         fill="#336699">
        </e-treemap-level>
    </e-treemap-levels>
</ejs-treemap>

@functions {
    public class TreeMapData
    {
        public string Name { get; set; }
        public string Category { get; set; }
        public double Sales { get; set; }
    }
}

常见模式

模式 1：带标题的多级层次结构

创建一个 3 级 TreeMap，展示大陆 → 国家 → 城市，并设置格式化标题：

@page
@{
    List<PopulationData> populationData = new List<PopulationData>
    {
        new PopulationData { Continent = "Asia", Country = "India", City = "Chennai", Population = 12000000 },
        new PopulationData { Continent = "Asia", Country = "India", City = "Mumbai", Population = 20000000 },
        new PopulationData { Continent = "Europe", Country = "Germany", City = "Berlin", Population = 3600000 }
    };

    ViewBag.populationData = populationData;
}

<ejs-treemap id="treemap"
             dataSource="ViewBag.populationData"
             weightValuePath="Population"
             layoutType="Squarified">
    <e-treemap-leafitemsettings labelPath="City">
    </e-treemap-leafitemsettings>
    <e-treemap-levels>
        <e-treemap-level groupPath="Continent"
                         headerFormat="${Continent}">
        </e-treemap-level>
        <e-treemap-level groupPath="Country"
                         headerFormat="${Country}">
        </e-treemap-level>
    </e-treemap-levels>
</ejs-treemap>

@functions {
    public class PopulationData
    {
        public string Continent { get; set; }
        public string Country { get; set; }
        public string City { get; set; }
        public double Population { get; set; }
    }
}

模式 2：基于范围的颜色映射

根据数值范围应用颜色，例如低、中、高销售业绩：

@page
@{
    List<SalesData> salesData = new List<SalesData>
    {
        new SalesData { Name = "Electronics", Category = "Technology", Sales = 4500 },
        new SalesData { Name = "Furniture", Category = "Home", Sales = 8500 },
        new SalesData { Name = "Appliances", Category = "Home", Sales = 12500 }
    };

    ViewBag.salesData = salesData;
}

<ejs-treemap id="treemap"
             dataSource="ViewBag.salesData"
             weightValuePath="Sales"
             rangeColorValuePath="Sales"
             layoutType="Squarified">
    <e-treemap-leafitemsettings labelPath="Name">
        <e-leafitemsettings-colormappings>
            <e-leafitemsettings-colormapping From="0"
                                             To="5000"
                                             Color=@("#66BB6A")>
            </e-leafitemsettings-colormapping>
            <e-leafitemsettings-colormapping From="5000"
                                             To="10000"
                                             Color=@("#FDD835")>
            </e-leafitemsettings-colormapping>
            <e-leafitemsettings-colormapping From="10000"
                                             To="15000"
                                             Color=@("#EF5350")>
            </e-leafitemsettings-colormapping>
        </e-leafitemsettings-colormappings>
    </e-treemap-leafitemsettings>
</ejs-treemap>

@functions {
    public class SalesData
    {
        public string Name { get; set; }
        public string Category { get; set; }
        public double Sales { get; set; }
    }
}

模式 3：带面包屑的交互式下钻

通过配置 enableDrillDown 和层次级别，启用层次结构探索：

@page
@{
    List<DrillDownData> drillDownData = new List<DrillDownData>
    {
        new DrillDownData { Continent = "Asia", Country = "India", State = "Tamil Nadu", Name = "Chennai", Sales = 7000 },
        new DrillDownData { Continent = "Asia", Country = "India", State = "Maharashtra", Name = "Mumbai", Sales = 9000 },
        new DrillDownData { Continent = "Europe", Country = "Germany", State = "Berlin", Name = "Berlin City", Sales = 6000 }
    };

    ViewBag.drillDownData = drillDownData;
}

<ejs-treemap id="treemap"
             dataSource="ViewBag.drillDownData"
             weightValuePath="Sales"
             enableDrillDown="true"
             layoutType="Squarified">
    <e-treemap-leafitemsettings labelPath="Name">
    </e-treemap-leafitemsettings>
    <e-treemap-levels>
        <e-treemap-level groupPath="Continent"
                         headerFormat="${Continent}">
        </e-treemap-level>
        <e-treemap-level groupPath="Country"
                         headerFormat="${Country}">
        </e-treemap-level>
        <e-treemap-level groupPath="State"
                         headerFormat="${State}">
        </e-treemap-level>
    </e-treemap-levels>
</ejs-treemap>

@functions {
    public class DrillDownData
    {
        public string Continent { get; set; }
        public string Country { get; set; }
        public string State { get; set; }
        public string Name { get; set; }
        public double Sales { get; set; }
    }
}

关键属性

dataSource - 指定用于渲染 TreeMap 的数据集合。
weightValuePath - 映射用于计算矩形大小的数值字段。
layoutType - 定义布局算法，例如 Squarified、SliceAndDiceVertical、SliceAndDiceHorizontal 或 SliceAndDiceAuto。
rangeColorValuePath - 映射用于基于范围进行颜色映射的数值字段。
equalColorValuePath - 映射用于基于等值或类别进行颜色映射的字段。
enableDrillDown - 启用层次结构下钻导航。
enableRtl - 启用从右到左的渲染支持。
levels - 使用一个或多个 groupPath 级别定义层次分组。
leafItemSettings - 配置叶项外观，包括标签、间隙、模板和颜色映射。
colorMapping - 定义根据数值范围、等值、不透明度或降低饱和度应用颜色的规则。

后续步骤

根据数据形状和可读性要求选择布局类型。
将数据结构准备为带有分组字段的扁平数据或层级数据。
配置 weightValuePath，以表示用于确定矩形大小的数值。
配置颜色映射，以可视化指标、类别或性能范围。
添加交互功能，例如下钻、选择、高亮、工具提示和图例。
自定义标签、标题和格式，以提高可读性。
根据生产环境的使用需求启用无障碍功能和导出选项。

支持 Markdown

登录后评论