syncfusion-winforms-treemap

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing Windows Forms TreeMap

实现Windows Forms TreeMap

Guide for implementing the Syncfusion® Windows Forms TreeMap control for visualizing hierarchical data through nested, color-coded rectangles. TreeMaps efficiently display large datasets where the size and color of rectangles represent quantitative values.
本指南用于指导实现Syncfusion® Windows Forms TreeMap控件,通过嵌套的颜色编码矩形可视化分层数据。TreeMap可高效展示大型数据集,其中矩形的大小和颜色分别代表对应的量化数值。

When to Use This Skill

何时使用本技能

Use this skill when you need to:
  • Visualize hierarchical data with nested rectangles
  • Display large datasets in space-efficient layouts
  • Show proportional relationships through rectangle sizes
  • Color-code data values with multiple mapping strategies
  • Implement TreeMap layouts (Squarified, SliceAndDice variations)
  • Create interactive visualizations with tooltips and legends
  • Customize TreeMap appearance with headers, labels, and custom rendering
  • Analyze categorical data like stock portfolios, disk usage, or sales by region
当你需要完成以下需求时可使用本技能:
  • 通过嵌套矩形可视化分层数据
  • 在节省空间的布局中展示大型数据集
  • 通过矩形尺寸展示比例关系
  • 通过多种映射策略为数据值添加颜色编码
  • 实现TreeMap布局(Squarified、SliceAndDice等多种变体)
  • 创建带提示框和图例的交互式可视化
  • 自定义TreeMap外观,包括头部、标签和自定义渲染逻辑
  • 分析分类数据,例如股票投资组合、磁盘使用情况、分地区销售额等

TreeMap Overview

TreeMap概述

Tree maps are ideal for visualizing large amounts of data where space is split into rectangles sized and colored based on quantitative variables. The levels in the hierarchy are visualized as rectangles containing other rectangles.
Key concepts:
  • Rectangles represent data items - Size based on weight value
  • Hierarchical nesting - Parent rectangles contain child rectangles
  • Color coding - Colors represent data categories or value ranges
  • Space efficiency - Entire visualization area is utilized
  • Multiple levels - Support for multi-level hierarchies
树图非常适合可视化海量数据,它会将展示区域拆分为多个矩形,矩形的大小和颜色由对应的量化变量决定。层级结构通过矩形嵌套其他矩形的方式实现可视化。
核心概念:
  • 矩形代表数据项 - 尺寸由权重值决定
  • 分层嵌套 - 父矩形包含子矩形
  • 颜色编码 - 颜色代表数据分类或数值区间
  • 空间利用率高 - 整个可视化区域都被充分利用
  • 支持多层级 - 支持多层级的分层结构

Common Use Cases

常见使用场景

TreeMaps are used to represent large or complex data sets in various applications:
  1. Stock Market Analysis - Rectangle size represents stock weight in index, color shows gain/loss range
  2. Internet Usage Categories - Visualize usage across retail, social networks, search, etc.
  3. News Aggregation - Colors represent sections (business, politics), size represents story frequency
  4. Weather Analysis - Opacity represents humidity, size represents geographic area
  5. Disk Space Usage - Visualize file and folder sizes in storage
  6. Sales by Region/Product - Show sales distribution across categories
  7. Portfolio Management - Display asset allocation and performance
TreeMap可在各类应用中用于表示大型或复杂数据集:
  1. 股票市场分析 - 矩形大小代表股票在指数中的权重,颜色代表涨跌区间
  2. 互联网使用分类 - 可视化电商、社交网络、搜索等不同场景的使用占比
  3. 新闻聚合 - 颜色代表板块(财经、政治),大小代表新闻发布频率
  4. 天气分析 - 不透明度代表湿度,大小代表地理区域面积
  5. 磁盘空间使用情况 - 可视化存储中文件和文件夹的大小
  6. 分地区/分产品销售额 - 展示不同分类下的销售分布
  7. 投资组合管理 - 展示资产配置和收益表现

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md
  • Assembly deployment and control dependencies
  • NuGet package installation
  • Creating TreeMap control instance
  • Adding control to Windows Forms application
  • Basic namespace and assembly references
  • First working TreeMap example
📄 阅读: references/getting-started.md
  • 程序集部署和控件依赖
  • NuGet包安装
  • 创建TreeMap控件实例
  • 向Windows Forms应用中添加控件
  • 基础命名空间和程序集引用
  • 首个可运行的TreeMap示例

Overview and Visualization Concepts

概述与可视化概念

📄 Read: references/overview-and-use-cases.md
  • What TreeMaps are and how they work
  • Hierarchical information visualization
  • Clustered rectangles and data representation
  • Real-world use case scenarios
  • When to choose TreeMap over other visualizations
📄 阅读: references/overview-and-use-cases.md
  • TreeMap的定义和运行原理
  • 分层信息可视化
  • 集群矩形和数据表示
  • 真实业务使用场景
  • 何时选择TreeMap而非其他可视化方案

Core Configuration - Weight and Color Paths

核心配置 - 权重和颜色路径

📄 Read: references/weight-and-color-paths.md
  • WeightValuePath property for sizing rectangles
  • ColorValuePath property for color mapping
  • Data binding path requirements
  • Field specifications in data models
  • Configuration examples
📄 阅读: references/weight-and-color-paths.md
  • 用于控制矩形尺寸的WeightValuePath属性
  • 用于颜色映射的ColorValuePath属性
  • 数据绑定路径要求
  • 数据模型中的字段规范
  • 配置示例

Data Binding and Levels

数据绑定与层级设置

📄 Read: references/items-source-and-levels.md
  • ItemsSource setup with flat data collections
  • Creating data view models
  • TreeMapFlatLevel configuration
  • GroupPath for hierarchical grouping
  • GroupGap for visual separation
  • Multi-level TreeMap structure
  • Complete data binding examples
📄 阅读: references/items-source-and-levels.md
  • 扁平数据集合的ItemsSource配置
  • 创建数据视图模型
  • TreeMapFlatLevel配置
  • 用于分层分组的GroupPath
  • 用于视觉分隔的GroupGap
  • 多层级TreeMap结构
  • 完整数据绑定示例

Layout Modes

布局模式

📄 Read: references/layout-modes.md
  • ItemsLayoutMode property overview
  • Squarified layout algorithm
  • SliceAndDiceAuto layout
  • SliceAndDiceHorizontal layout
  • SliceAndDiceVertical layout
  • Choosing the right layout for your data
  • Visual comparisons
📄 阅读: references/layout-modes.md
  • ItemsLayoutMode属性概述
  • Squarified布局算法
  • SliceAndDiceAuto布局
  • SliceAndDiceHorizontal布局
  • SliceAndDiceVertical布局
  • 为你的数据选择合适的布局
  • 视觉效果对比

Color Mapping Strategies

颜色映射策略

📄 Read: references/color-mapping.md
  • Four color mapping types overview
  • UniColorMapping for single color application
  • RangeBrushColorMapping for value ranges
  • DesaturationColorMapping for opacity-based coloring
  • PaletteColorMapping for color collections
  • LeafColorMapping configuration
  • Complete examples for each type
📄 阅读: references/color-mapping.md
  • 四种颜色映射类型概述
  • 用于单色应用的UniColorMapping
  • 用于数值区间的RangeBrushColorMapping
  • 用于基于不透明度着色的DesaturationColorMapping
  • 用于颜色集合的PaletteColorMapping
  • LeafColorMapping配置
  • 每种类型的完整示例

Headers and Labels Customization

头部和标签自定义

📄 Read: references/headers-and-labels.md
  • Label font and color customization
  • LabelBrush and LabelBackgroundBrush
  • Label border properties
  • HeaderBrush configuration
  • ShowLabels property for visibility
  • HeaderHeight for level headers
  • Complete styling examples
📄 阅读: references/headers-and-labels.md
  • 标签字体和颜色自定义
  • LabelBrush和LabelBackgroundBrush
  • 标签边框属性
  • HeaderBrush配置
  • 控制可见性的ShowLabels属性
  • 层级头部的HeaderHeight配置
  • 完整样式示例

Legend Support

图例支持

📄 Read: references/legend-support.md
  • TreeMap legend for color value demonstration
  • LegendPosition configuration (Left, Right, Top, Bottom)
  • LegendType for icon shapes
  • LegendGap for spacing
  • Integration with RangeBrushColorMapping
  • LegendLabel in RangeBrush items
📄 阅读: references/legend-support.md
  • 用于展示颜色数值含义的TreeMap图例
  • LegendPosition配置(左、右、上、下)
  • 控制图标形状的LegendType
  • 控制间距的LegendGap
  • 与RangeBrushColorMapping的集成
  • RangeBrush项中的LegendLabel

Tooltips and Advanced Customization

提示框与高级自定义

📄 Read: references/tooltip-and-customization.md
  • Tooltip visibility and configuration
  • HeaderToolTipInfo for group tooltips
  • ItemToolTipInfo for leaf tooltips
  • Custom tooltip content patterns
  • LeafItemDrawing event for custom rendering
  • Advanced leaf node customization
  • Custom graphics and images in TreeMap
📄 阅读: references/tooltip-and-customization.md
  • 提示框可见性与配置
  • 分组提示框的HeaderToolTipInfo
  • 叶子节点提示框的ItemToolTipInfo
  • 自定义提示框内容模板
  • 用于自定义渲染的LeafItemDrawing事件
  • 高级叶子节点自定义
  • 在TreeMap中使用自定义图形和图片

Quick Start Example

快速入门示例

Step 1: Install NuGet Package

步骤1:安装NuGet包

powershell
Install-Package Syncfusion.TreeMap.WinForms
powershell
Install-Package Syncfusion.TreeMap.WinForms

Step 2: Create Data Model

步骤2:创建数据模型

csharp
using System.Collections.ObjectModel;

public class PopulationDetail
{
    public string Continent { get; set; }
    public string Country { get; set; }
    public double Growth { get; set; }
    public double Population { get; set; }
}

public class PopulationViewModel
{
    public ObservableCollection<PopulationDetail> PopulationDetails { get; set; }
    
    public PopulationViewModel()
    {
        PopulationDetails = new ObservableCollection<PopulationDetail>();
        
        PopulationDetails.Add(new PopulationDetail 
        { 
            Continent = "Asia", 
            Country = "Indonesia", 
            Growth = 3, 
            Population = 237641326 
        });
        
        PopulationDetails.Add(new PopulationDetail 
        { 
            Continent = "Asia", 
            Country = "Russia", 
            Growth = 2, 
            Population = 152518015 
        });
        
        PopulationDetails.Add(new PopulationDetail 
        { 
            Continent = "North America", 
            Country = "United States", 
            Growth = 4, 
            Population = 315645000 
        });
        
        // Add more data...
    }
}
csharp
using System.Collections.ObjectModel;

public class PopulationDetail
{
    public string Continent { get; set; }
    public string Country { get; set; }
    public double Growth { get; set; }
    public double Population { get; set; }
}

public class PopulationViewModel
{
    public ObservableCollection<PopulationDetail> PopulationDetails { get; set; }
    
    public PopulationViewModel()
    {
        PopulationDetails = new ObservableCollection<PopulationDetail>();
        
        PopulationDetails.Add(new PopulationDetail 
        { 
            Continent = "Asia", 
            Country = "Indonesia", 
            Growth = 3, 
            Population = 237641326 
        });
        
        PopulationDetails.Add(new PopulationDetail 
        { 
            Continent = "Asia", 
            Country = "Russia", 
            Growth = 2, 
            Population = 152518015 
        });
        
        PopulationDetails.Add(new PopulationDetail 
        { 
            Continent = "North America", 
            Country = "United States", 
            Growth = 4, 
            Population = 315645000 
        });
        
        // Add more data...
    }
}

Step 3: Configure TreeMap

步骤3:配置TreeMap

csharp
using Syncfusion.Windows.Forms.TreeMap;

public class MyForm : Form
{
    private TreeMap treeMap;
    
    public MyForm()
    {
        InitializeComponent();
        
        // Create TreeMap instance
        treeMap = new TreeMap();
        
        // Set data source
        PopulationViewModel data = new PopulationViewModel();
        treeMap.ItemsSource = data.PopulationDetails;
        
        // Configure paths
        treeMap.WeightValuePath = "Population";
        treeMap.ColorValuePath = "Growth";
        
        // Set layout mode
        treeMap.ItemsLayoutMode = ItemsLayoutModes.Squarified;
        
        // Add first level (Continent)
        TreeMapFlatLevel level1 = new TreeMapFlatLevel();
        level1.GroupPath = "Continent";
        level1.ShowLabels = true;
        treeMap.Levels.Add(level1);
        
        // Add second level (Country)
        TreeMapFlatLevel level2 = new TreeMapFlatLevel();
        level2.GroupPath = "Country";
        level2.ShowLabels = true;
        level2.HeaderHeight = 25;
        treeMap.Levels.Add(level2);
        
        // Add color mapping
        UniColorMapping colorMapping = new UniColorMapping();
        colorMapping.Color = Color.MediumSlateBlue;
        treeMap.LeafColorMapping = colorMapping;
        
        // Set size and add to form
        treeMap.Size = new Size(800, 600);
        treeMap.Location = new Point(10, 10);
        this.Controls.Add(treeMap);
    }
}
csharp
using Syncfusion.Windows.Forms.TreeMap;

public class MyForm : Form
{
    private TreeMap treeMap;
    
    public MyForm()
    {
        InitializeComponent();
        
        // Create TreeMap instance
        treeMap = new TreeMap();
        
        // Set data source
        PopulationViewModel data = new PopulationViewModel();
        treeMap.ItemsSource = data.PopulationDetails;
        
        // Configure paths
        treeMap.WeightValuePath = "Population";
        treeMap.ColorValuePath = "Growth";
        
        // Set layout mode
        treeMap.ItemsLayoutMode = ItemsLayoutModes.Squarified;
        
        // Add first level (Continent)
        TreeMapFlatLevel level1 = new TreeMapFlatLevel();
        level1.GroupPath = "Continent";
        level1.ShowLabels = true;
        treeMap.Levels.Add(level1);
        
        // Add second level (Country)
        TreeMapFlatLevel level2 = new TreeMapFlatLevel();
        level2.GroupPath = "Country";
        level2.ShowLabels = true;
        level2.HeaderHeight = 25;
        treeMap.Levels.Add(level2);
        
        // Add color mapping
        UniColorMapping colorMapping = new UniColorMapping();
        colorMapping.Color = Color.MediumSlateBlue;
        treeMap.LeafColorMapping = colorMapping;
        
        // Set size and add to form
        treeMap.Size = new Size(800, 600);
        treeMap.Location = new Point(10, 10);
        this.Controls.Add(treeMap);
    }
}

Common Patterns

常用模式

Multi-Level Hierarchy Pattern

多层级分层模式

csharp
// Create levels for nested grouping
TreeMapFlatLevel level1 = new TreeMapFlatLevel();
level1.GroupPath = "Category";
level1.ShowLabels = true;
treeMap.Levels.Add(level1);

TreeMapFlatLevel level2 = new TreeMapFlatLevel();
level2.GroupPath = "SubCategory";
level2.ShowLabels = true;
level2.HeaderHeight = 25;
treeMap.Levels.Add(level2);

TreeMapFlatLevel level3 = new TreeMapFlatLevel();
level3.GroupPath = "Item";
level3.ShowLabels = true;
level3.HeaderHeight = 20;
treeMap.Levels.Add(level3);
csharp
// Create levels for nested grouping
TreeMapFlatLevel level1 = new TreeMapFlatLevel();
level1.GroupPath = "Category";
level1.ShowLabels = true;
treeMap.Levels.Add(level1);

TreeMapFlatLevel level2 = new TreeMapFlatLevel();
level2.GroupPath = "SubCategory";
level2.ShowLabels = true;
level2.HeaderHeight = 25;
treeMap.Levels.Add(level2);

TreeMapFlatLevel level3 = new TreeMapFlatLevel();
level3.GroupPath = "Item";
level3.ShowLabels = true;
level3.HeaderHeight = 20;
treeMap.Levels.Add(level3);

Range-Based Color Mapping Pattern

基于区间的颜色映射模式

csharp
RangeBrushColorMapping rangeMapping = new RangeBrushColorMapping();

rangeMapping.Brushes.Add(new RangeBrush 
{ 
    Color = ColorTranslator.FromHtml("#77D8D8"), 
    From = 0, 
    To = 1, 
    LegendLabel = "Low" 
});

rangeMapping.Brushes.Add(new RangeBrush 
{ 
    Color = ColorTranslator.FromHtml("#FFAF51"), 
    From = 1, 
    To = 5, 
    LegendLabel = "Medium" 
});

rangeMapping.Brushes.Add(new RangeBrush 
{ 
    Color = ColorTranslator.FromHtml("#F3D240"), 
    From = 5, 
    To = 20, 
    LegendLabel = "High" 
});

treeMap.LeafColorMapping = rangeMapping;
csharp
RangeBrushColorMapping rangeMapping = new RangeBrushColorMapping();

rangeMapping.Brushes.Add(new RangeBrush 
{ 
    Color = ColorTranslator.FromHtml("#77D8D8"), 
    From = 0, 
    To = 1, 
    LegendLabel = "Low" 
});

rangeMapping.Brushes.Add(new RangeBrush 
{ 
    Color = ColorTranslator.FromHtml("#FFAF51"), 
    From = 1, 
    To = 5, 
    LegendLabel = "Medium" 
});

rangeMapping.Brushes.Add(new RangeBrush 
{ 
    Color = ColorTranslator.FromHtml("#F3D240"), 
    From = 5, 
    To = 20, 
    LegendLabel = "High" 
});

treeMap.LeafColorMapping = rangeMapping;

Interactive Tooltip Pattern

交互式提示框模式

csharp
// Enable tooltips
treeMap.IsToolTipVisible = true;

// Configure header tooltip
ToolTipInfo headerToolTip = new ToolTipInfo();
headerToolTip.ToolTipHeaderPattern = "<b>{Label}</b>";
headerToolTip.ToolTipContentPattern = "Growth: {Growth}%";
treeMap.HeaderToolTipInfo = headerToolTip;

// Configure item tooltip
ToolTipInfo itemToolTip = new ToolTipInfo();
itemToolTip.ToolTipHeaderPattern = "<b>{Country}</b>";
itemToolTip.ToolTipContentPattern = "Growth: {Growth}%\nPopulation: {Population}";
treeMap.ItemToolTipInfo = itemToolTip;
csharp
// Enable tooltips
treeMap.IsToolTipVisible = true;

// Configure header tooltip
ToolTipInfo headerToolTip = new ToolTipInfo();
headerToolTip.ToolTipHeaderPattern = "<b>{Label}</b>";
headerToolTip.ToolTipContentPattern = "Growth: {Growth}%";
treeMap.HeaderToolTipInfo = headerToolTip;

// Configure item tooltip
ToolTipInfo itemToolTip = new ToolTipInfo();
itemToolTip.ToolTipHeaderPattern = "<b>{Country}</b>";
itemToolTip.ToolTipContentPattern = "Growth: {Growth}%\nPopulation: {Population}";
treeMap.ItemToolTipInfo = itemToolTip;

Key Properties Reference

核心属性参考

Essential Properties

基础属性

PropertyTypeDescription
ItemsSource
objectData collection to visualize
WeightValuePath
stringPath to field determining rectangle size
ColorValuePath
stringPath to field for color mapping
ItemsLayoutMode
ItemsLayoutModesLayout algorithm selection
Levels
TreeMapLevelCollectionCollection of hierarchical levels
LeafColorMapping
TreeMapColorMappingColor mapping strategy
属性类型描述
ItemsSource
object要可视化的数据集合
WeightValuePath
string决定矩形大小的字段路径
ColorValuePath
string用于颜色映射的字段路径
ItemsLayoutMode
ItemsLayoutModes布局算法选择
Levels
TreeMapLevelCollection分层层级集合
LeafColorMapping
TreeMapColorMapping颜色映射策略

Customization Properties

自定义属性

PropertyTypeDescription
LabelFont
FontFont for leaf node labels
LabelBrush
BrushLabel text color
LabelBackgroundBrush
BrushLabel background color
LabelBorderBrush
BrushLabel border color
LabelBorderThickness
intLabel border width
HeaderBrush
BrushHeader background color
属性类型描述
LabelFont
Font叶子节点标签的字体
LabelBrush
Brush标签文本颜色
LabelBackgroundBrush
Brush标签背景颜色
LabelBorderBrush
Brush标签边框颜色
LabelBorderThickness
int标签边框宽度
HeaderBrush
Brush头部背景颜色

Legend Properties

图例属性

PropertyTypeDescription
LegendPosition
LegendPositionsLegend placement (Top/Bottom/Left/Right)
LegendType
LegendTypesLegend icon shape
LegendGap
intSpacing between legend items
属性类型描述
LegendPosition
LegendPositions图例位置(上/下/左/右)
LegendType
LegendTypes图例图标形状
LegendGap
int图例项之间的间距

Tooltip Properties

提示框属性

PropertyTypeDescription
IsToolTipVisible
boolEnable/disable tooltips
HeaderToolTipInfo
ToolTipInfoTooltip configuration for headers
ItemToolTipInfo
ToolTipInfoTooltip configuration for leaf items
属性类型描述
IsToolTipVisible
bool启用/禁用提示框
HeaderToolTipInfo
ToolTipInfo头部提示框配置
ItemToolTipInfo
ToolTipInfo叶子节点提示框配置

Decision Guide

选型指南

When to Use Each Layout Mode

不同布局模式的适用场景

Squarified:
  • Best for balanced aspect ratios
  • More readable rectangles
  • General-purpose visualization
  • Use when: Data proportions vary widely
SliceAndDiceAuto:
  • Alternates horizontal/vertical splits by level
  • Good for hierarchical clarity
  • Use when: Showing clear level separation
SliceAndDiceHorizontal:
  • All rectangles split horizontally
  • Use when: Wide display area available
SliceAndDiceVertical:
  • All rectangles split vertically
  • Use when: Tall display area available
Squarified:
  • 最适合平衡宽高比的场景
  • 矩形可读性更强
  • 通用型可视化
  • 适用场景: 数据比例差异较大时
SliceAndDiceAuto:
  • 按层级交替水平/垂直拆分
  • 分层清晰度高
  • 适用场景: 需要清晰展示层级分隔时
SliceAndDiceHorizontal:
  • 所有矩形均水平拆分
  • 适用场景: 展示区域宽度充足时
SliceAndDiceVertical:
  • 所有矩形均垂直拆分
  • 适用场景: 展示区域高度充足时

Choosing Color Mapping

颜色映射选型

UniColorMapping:
  • Single color for all items
  • Use when: Color doesn't represent data, only grouping
RangeBrushColorMapping:
  • Different colors for value ranges
  • Use when: Categorizing data into discrete ranges (low/medium/high)
DesaturationColorMapping:
  • Single base color with varying opacity
  • Use when: Showing continuous gradient of values
PaletteColorMapping:
  • Cycle through color collection
  • Use when: Distinguishing categories without value meaning
UniColorMapping:
  • 所有项使用单一颜色
  • 适用场景: 颜色不代表数据含义,仅用于分组时
RangeBrushColorMapping:
  • 不同数值区间使用不同颜色
  • 适用场景: 将数据分类为离散区间(低/中/高)时
DesaturationColorMapping:
  • 单一基础颜色搭配不同透明度
  • 适用场景: 展示连续渐变数值时
PaletteColorMapping:
  • 循环使用颜色集合
  • 适用场景: 仅需区分类别、颜色无数值含义时

Edge Cases and Troubleshooting

边界情况与故障排查

Missing Data in Visualization

可视化中缺失数据

  • Cause: WeightValuePath or ColorValuePath field missing in data model
  • Solution: Ensure all data objects have required properties
  • 原因: 数据模型中缺少WeightValuePath或ColorValuePath对应的字段
  • 解决方案: 确保所有数据对象都包含所需属性

Labels Not Showing

标签不显示

  • Cause: ShowLabels property not set on TreeMapFlatLevel
  • Solution: Set
    level.ShowLabels = true
    for each level
  • 原因: TreeMapFlatLevel上未设置ShowLabels属性
  • 解决方案: 为每个层级设置
    level.ShowLabels = true

Colors Not Applying

颜色不生效

  • Cause: LeafColorMapping not configured
  • Solution: Create and assign color mapping to
    TreeMap.LeafColorMapping
  • 原因: 未配置LeafColorMapping
  • 解决方案: 创建颜色映射并赋值给
    TreeMap.LeafColorMapping

Assembly Reference Error

程序集引用错误

  • Cause: Missing Syncfusion.TreeMap.Windows assembly
  • Solution: Install
    Syncfusion.TreeMap.WinForms
    NuGet package
  • 原因: 缺少Syncfusion.TreeMap.Windows程序集
  • 解决方案: 安装
    Syncfusion.TreeMap.WinForms
    NuGet包

Levels Not Grouping Correctly

层级分组不正确

  • Cause: GroupPath doesn't match data property name
  • Solution: Verify GroupPath string matches exact property name (case-sensitive)
  • 原因: GroupPath与数据属性名称不匹配
  • 解决方案: 确认GroupPath字符串与属性名称完全匹配(区分大小写)

Best Practices

最佳实践

  1. Use ObservableCollection for dynamic data that may change
  2. Set appropriate HeaderHeight for multi-level TreeMaps (20-30 pixels)
  3. Choose color mapping based on data meaning (ranges vs. gradient)
  4. Enable tooltips for interactive exploration of data
  5. Use GroupGap to visually separate levels (5-10 pixels)
  6. Test with realistic data sizes to ensure layout works well
  7. Provide legends when using RangeBrushColorMapping
  8. Consider layout mode based on display dimensions

Assembly:
Syncfusion.TreeMap.Windows

Namespace:
Syncfusion.Windows.Forms.TreeMap

NuGet Package:
Syncfusion.TreeMap.WinForms
  1. 动态变更的数据使用
    ObservableCollection
  2. 为多层级TreeMap设置合适的HeaderHeight(20-30像素)
  3. 根据数据含义选择颜色映射(区间 vs 渐变)
  4. 启用提示框方便交互式数据探索
  5. 使用GroupGap从视觉上分隔不同层级(5-10像素)
  6. 使用真实数据量测试确保布局效果正常
  7. 使用RangeBrushColorMapping时提供图例
  8. 根据展示尺寸选择合适的布局模式

程序集:
Syncfusion.TreeMap.Windows

命名空间:
Syncfusion.Windows.Forms.TreeMap

NuGet包:
Syncfusion.TreeMap.WinForms