syncfusion-maui-treemap
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseImplementing Syncfusion .NET MAUI TreeMap
实现Syncfusion .NET MAUI TreeMap
The Syncfusion .NET MAUI TreeMap (SfTreeMap) is a powerful data visualization control that represents hierarchical data using nested rectangles. Each rectangle's size and color are determined by underlying data values, making it ideal for visualizing large datasets with hierarchical structure, such as organizational charts, file systems, population data, sales distributions, and more.
Syncfusion .NET MAUI TreeMap（SfTreeMap）是一款强大的数据可视化控件，使用嵌套矩形表示层级数据。每个矩形的大小和颜色由底层数据值决定，非常适合可视化具有层级结构的大型数据集，例如组织结构图、文件系统、人口数据、销售分布等。
When to Use This Skill
何时使用该技能
Use this skill when you need to:
- Visualize hierarchical data with nested rectangles where size represents data magnitude
- Display multi-level categorized data (e.g., sales by region → country → product)
- Create heat maps showing data distribution across categories with color-coded values
- Implement squarified or slice-and-dice layouts for optimal space utilization
- Show data with legends and tooltips for interactive exploration
- Enable selection and interaction with hierarchical data items
- Apply various color schemes (uniform, range-based, desaturation, or palette) to represent data values
- Customize appearance of leaf items, group headers, borders, labels, and more
Common scenarios include population visualization, sales analytics, file storage analysis, organizational hierarchies, budget breakdowns, and any domain requiring proportional area representation of hierarchical data.
当你需要以下功能时使用该技能：
- 可视化层级数据：使用嵌套矩形，其中大小代表数据量级
- 展示多级分类数据（例如：按地区→国家→产品划分的销售数据）
- 创建热图：通过颜色编码值展示跨类别的数据分布
- 实现方形或切片布局：优化空间利用率
- 显示带图例和工具提示的数据：支持交互式探索
- 启用对层级数据项的选择与交互
- 应用各种配色方案（统一、基于范围、去饱和或调色板）来表示数据值
- 自定义外观：包括叶子项、组标题、边框、标签等
常见场景包括人口可视化、销售分析、文件存储分析、组织层级、预算分解，以及任何需要按比例面积表示层级数据的领域。
Component Overview
组件概述
Key Features:
- Data Binding: Bind to hierarchical collections with automatic visualization
- Layout Types: Squarified (default), SliceAndDiceAuto, SliceAndDiceHorizontal, SliceAndDiceVertical
- Hierarchical Levels: Multi-level support using GroupPath for nested data structures
- Brush Settings: Four types - Uniform, Range, Desaturation, and Palette for flexible coloring
- Legend: Customizable legend with icon types, placement, and text styling
- Tooltip: Interactive tooltips displaying data details on hover/tap
- Selection: Single or multiple selection modes with customizable highlighting
- Accessibility: Built-in keyboard navigation, screen reader support, and WCAG compliance
- Customization: Extensive styling options for leaf items, headers, borders, labels, and spacing
核心特性：
- 数据绑定：绑定到层级集合并自动可视化
- 布局类型：方形布局（默认）、SliceAndDiceAuto、SliceAndDiceHorizontal、SliceAndDiceVertical
- 层级支持：使用GroupPath实现多级嵌套数据结构支持
- 画笔设置：四种类型——Uniform、Range、Desaturation和Palette，提供灵活的着色方式
- 图例：可自定义的图例，支持图标类型、位置和文本样式
- 工具提示：交互式工具提示，在悬停/点击时显示数据详情
- 选择功能：单选或多选模式，支持自定义高亮
- 无障碍支持：内置键盘导航、屏幕阅读器支持和WCAG合规性
- 自定义选项：对叶子项、标题、边框、标签和间距的广泛样式设置
Documentation and Navigation Guide
文档与导航指南
Getting Started
入门指南
📄 Read: references/getting-started.md
- NuGet package installation (Syncfusion.Maui.TreeMap)
- Handler registration (ConfigureSyncfusionCore in MauiProgram.cs)
- Basic TreeMap implementation in XAML and C#
- Data model and view model setup
- DataSource binding and PrimaryValuePath configuration
- Adding labels with LabelPath
- Complete minimal working example
When to read: Start here for initial setup and first TreeMap implementation.
📄 阅读： references/getting-started.md
- NuGet包安装（Syncfusion.Maui.TreeMap）
- 处理器注册（在MauiProgram.cs中配置ConfigureSyncfusionCore）
- 在XAML和C#中实现基础TreeMap
- 数据模型和视图模型设置
- DataSource绑定和PrimaryValuePath配置
- 使用LabelPath添加标签
- 完整的最小可运行示例
阅读时机：初始设置和首次实现TreeMap时从这里开始。
Layout Configuration
布局配置
📄 Read: references/layouts.md
- Squarified layout (optimal aspect ratio, default)
- SliceAndDiceAuto layout (adaptive direction)
- SliceAndDiceHorizontal layout (horizontal slicing)
- SliceAndDiceVertical layout (vertical slicing)
- LayoutType property usage
- Choosing the right layout for your data
- Visual comparison of layout types
When to read: When you need to change the TreeMap layout algorithm or understand which layout works best for your data structure.
📄 阅读： references/layouts.md
- 方形布局（最佳宽高比，默认）
- SliceAndDiceAuto布局（自适应方向）
- SliceAndDiceHorizontal布局（水平切片）
- SliceAndDiceVertical布局（垂直切片）
- LayoutType属性的使用
- 为你的数据选择合适的布局
- 布局类型的视觉对比
阅读时机：当你需要更改TreeMap布局算法或了解哪种布局最适合你的数据结构时。
Hierarchical Levels
层级设置
📄 Read: references/hierarchical-levels.md
- Understanding levels in TreeMap
- GroupPath property for multi-level categorization
- Adding multiple levels (n-level support)
- Level appearance customization (Spacing, HeaderHeight, Background)
- Stroke and StrokeWidth for level borders
- TextStyle for header text
- Group item brush settings (PaletteBrushSettings)
When to read: When implementing multi-level hierarchical data (e.g., Continent → Country → City) or customizing group header appearance.
📄 阅读： references/hierarchical-levels.md
- 理解TreeMap中的层级
- 使用GroupPath属性实现多级分类
- 添加多个层级（支持n级）
- 层级外观自定义（间距、标题高度、背景）
- 层级边框的Stroke和StrokeWidth设置
- 标题文本的TextStyle设置
- 组项画笔设置（PaletteBrushSettings）
阅读时机：当实现多级层级数据（例如：大洲→国家→城市）或自定义组标题外观时。
Color and Brush Settings
颜色与画笔设置
📄 Read: references/brush-settings.md
- UniformBrushSettings (single color for all items)
- RangeBrushSettings (color by value ranges with From/To)
- DesaturationBrushSettings (gradient by saturation levels)
- PaletteBrushSettings (multiple colors from a palette)
- RangeColorValuePath configuration
- LegendLabel for range definitions
- When to use each brush type
When to read: When you need to apply color schemes to visualize data values, ranges, or categories.
📄 阅读： references/brush-settings.md
- UniformBrushSettings（所有项使用单一颜色）
- RangeBrushSettings（按值范围着色，带From/To设置）
- DesaturationBrushSettings（按饱和度梯度着色）
- PaletteBrushSettings（使用调色板中的多种颜色）
- RangeColorValuePath配置
- 范围定义的LegendLabel
- 每种画笔类型的适用场景
阅读时机：当你需要应用配色方案来可视化数据值、范围或类别时。
Leaf Item Customization
叶子项自定义
📄 Read: references/leaf-item-customization.md
- LabelPath for displaying text on leaf items
- Spacing between leaf items
- Stroke and StrokeWidth for leaf borders
- TextStyle configuration (color, font, size, attributes)
- Label overflow modes (wrap, trim)
- Label template customization
- ShowLabels property
When to read: When customizing the appearance and labeling of individual data items (leaf nodes).
📄 阅读： references/leaf-item-customization.md
- 使用LabelPath在叶子项上显示文本
- 叶子项之间的间距
- 叶子边框的Stroke和StrokeWidth设置
- TextStyle配置（颜色、字体、大小、属性）
- 标签溢出模式（换行、截断）
- 标签模板自定义
- ShowLabels属性
阅读时机：当自定义单个数据项（叶子节点）的外观和标签时。
Legend Configuration
图例配置
📄 Read: references/legend.md
- Enabling legend with ShowLegend property
- Legend placement (Top, Bottom, Left, Right)
- LegendSettings configuration
- Icon types (Circle, Rectangle, Diamond, Triangle, etc.)
- Icon size customization
- Text style for legend items
- Legend item template
- Integration with RangeBrushSettings
When to read: When adding a legend to explain color coding or value ranges in the TreeMap.
📄 阅读： references/legend.md
- 使用ShowLegend属性启用图例
- 图例位置（顶部、底部、左侧、右侧）
- LegendSettings配置
- 图标类型（圆形、矩形、菱形、三角形等）
- 图标大小自定义
- 图例项的文本样式
- 图例项模板
- 与RangeBrushSettings集成
阅读时机：当添加图例来解释TreeMap中的颜色编码或值范围时。
Tooltip Implementation
工具提示实现
📄 Read: references/tooltip.md
- Enabling tooltip with ShowToolTip property
- Default tooltip behavior
- Tooltip template customization
- TooltipTemplate property usage
- Data context in tooltips
- Styling tooltip appearance
- Tooltips for leaf items vs group items
When to read: When adding interactive tooltips to display additional data on hover or tap.
📄 阅读： references/tooltip.md
- 使用ShowToolTip属性启用工具提示
- 默认工具提示行为
- 工具提示模板自定义
- TooltipTemplate属性的使用
- 工具提示中的数据上下文
- 工具提示外观样式设置
- 叶子项与组项的工具提示
阅读时机：当添加交互式工具提示以在悬停或点击时显示额外数据时。
Selection and Interaction
选择与交互
📄 Read: references/selection-interaction.md
- SelectionMode property (None, Single, Multiple)
- Single vs multiple selection behavior
- SelectedItems collection
- SelectionChanged event handling
- Highlight settings (HighlightOnSelection)
- Selection stroke and fill customization
- Programmatic selection
When to read: When implementing user interaction features like selecting items, highlighting, or responding to selection events.
📄 阅读： references/selection-interaction.md
- SelectionMode属性（None、Single、Multiple）
- 单选与多选行为
- SelectedItems集合
- SelectionChanged事件处理
- 高亮设置（HighlightOnSelection）
- 选择边框和填充的自定义
- 程序化选择
阅读时机：当实现用户交互功能（如选择项、高亮或响应选择事件）时。
Accessibility and Events
无障碍与事件
📄 Read: references/accessibility-events.md
- Accessibility support overview
- Keyboard navigation support
- WCAG compliance features
- ItemSelected and ItemDeselected events
- ItemTapped event
- Drilldown functionality
- Right-to-left (RTL) support
- Semantic properties for accessibility
When to read: When implementing accessible TreeMaps, handling events, or supporting RTL languages.
📄 阅读： references/accessibility-events.md
- 无障碍支持概述
- 键盘导航支持
- WCAG合规特性
- ItemSelected和ItemDeselected事件
- ItemTapped事件
- 钻取功能
- 从右到左（RTL）支持
- 无障碍语义属性
阅读时机：当实现无障碍TreeMap、处理事件或支持RTL语言时。