syncfusion-blazor-sankey

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Blazor Sankey Diagram

实现Syncfusion Blazor Sankey Diagram

A comprehensive skill for implementing the Syncfusion Blazor Sankey Diagram component. The Sankey diagram is a powerful visualization tool for displaying flows and relationships between categories, showing the magnitude and direction of flows using proportionally-sized links.

这是一份关于实现Syncfusion Blazor Sankey Diagram组件的综合指南。桑基图是一种强大的可视化工具，用于展示类别之间的流和关系，通过按比例缩放的链接显示流的大小和方向。

When to Use This Skill

何时使用本技能

Use this skill when you need to:

Visualize flows and relationships between different categories or stages
Display energy or resource flows in systems (electricity, water, materials)
Show data movements between entities (website traffic, user journeys, data pipelines)
Illustrate budget or financial flows (income/expenses, resource allocation)
Map supply chain or logistics flows (product movement, distribution)
Create process flow diagrams with quantifiable magnitudes
Analyze network flows (data transfer, communication patterns)
Display conversion funnels with drop-off visualization
Implement the
```
SfSankey
```
Blazor component
Work with flow data structures (nodes and links)
Customize Sankey diagram appearance and behavior
Handle interactive events for flow exploration
Export or print flow diagrams

当你需要以下操作时，可使用本技能：

可视化不同类别或阶段之间的流和关系
展示系统中的能源或资源流（电力、水、物料）
展示实体之间的数据流动（网站流量、用户旅程、数据管道）
展示预算或资金流（收入/支出、资源分配）
绘制供应链或物流流（产品运输、分销）
创建带有可量化数值的流程流程图
分析网络流（数据传输、通信模式）
展示带有流失可视化的转化漏斗
实现
```
SfSankey
```
Blazor组件
处理流数据结构（节点和链接）
自定义桑基图的外观和行为
处理用于流探索的交互事件
导出或打印流图表

Component Overview

组件概述

What is a Sankey Diagram?

什么是桑基图？

A Sankey diagram is a flow diagram where the width of arrows or connections is proportional to the flow magnitude. It consists of:

Nodes: Entities, categories, or stages in the flow (e.g., energy sources, process steps)
Links: Connections between nodes showing flow direction and magnitude
Flow Width: Visual representation of quantity/magnitude (wider = larger flow)

桑基图是一种流图，其中箭头或连接的宽度与流的大小成正比。它包含：

节点：流中的实体、类别或阶段（例如能源来源、流程步骤）
链接：节点之间的连接，显示流的方向和大小
流宽度：数量/大小的可视化表示（越宽表示流越大）

Key Features

核心功能

Data-driven visualization with nodes and links collections
Automatic layout with configurable orientation (horizontal/vertical)
Rich customization for nodes, links, labels, and legends
Interactive events for clicks, hovers, and rendering customization
Tooltips showing flow details on hover
Print and export functionality (PNG, JPEG, SVG, PDF)
Accessibility compliant with WCAG 2.2 standards
Responsive design with dynamic resizing

基于节点和链接集合的数据驱动可视化
可配置方向（水平/垂直）的自动布局
针对节点、链接、标签和图例的丰富自定义选项
用于点击、悬停和渲染自定义的交互事件
悬停时显示流详情的工具提示
打印和导出功能（PNG、JPEG、SVG、PDF）
符合WCAG 2.2标准的无障碍支持
支持动态调整大小的响应式设计

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md
When to read: First-time setup, installation, project configuration
Contains:

NuGet package installation (Syncfusion.Blazor.Sankey)
Service registration and namespace imports
CSS theme and script references
Basic Sankey diagram implementation
Complete minimal working example
Setup troubleshooting

📄 阅读： references/getting-started.md
阅读时机： 首次设置、安装、项目配置
包含内容：

NuGet包安装（Syncfusion.Blazor.Sankey）
服务注册和命名空间导入
CSS主题和脚本引用
基础桑基图实现
完整的最小可运行示例
设置故障排除

Data Binding

数据绑定

📄 Read: references/data-binding.md
When to read: Setting up data structure, binding nodes and links, API integration
Contains:

Understanding SankeyDataNode and SankeyDataLink models
Creating nodes and links collections
Binding data to the Sankey component
REST API integration patterns
JSON data structure examples
Dynamic data updates

📄 阅读： references/data-binding.md
阅读时机： 设置数据结构、绑定节点和链接、API集成
包含内容：

理解SankeyDataNode和SankeyDataLink模型
创建节点和链接集合
将数据绑定到Sankey组件
REST API集成模式
JSON数据结构示例
动态数据更新

Nodes Configuration

节点配置

📄 Read: references/nodes.md
When to read: Customizing node appearance, styling, properties
Contains:

Node fundamentals and structure
Node ID and label configuration
Node styling with SankeyNodeSettings
Color, width, and padding properties
Node positioning and layout
Complete node examples

📄 阅读： references/nodes.md
阅读时机： 自定义节点外观、样式、属性
包含内容：

节点基础和结构
节点ID和标签配置
使用SankeyNodeSettings进行节点样式设置
颜色、宽度和内边距属性
节点定位和布局
完整的节点示例

Links Configuration

链接配置

📄 Read: references/links.md
When to read: Configuring flow connections, link styling, magnitude representation
Contains:

Link fundamentals and flow representation
SourceId, TargetId, and Value properties
Link styling with SankeyLinkSettings
Color, opacity, and stroke properties
Flow direction and magnitude
Multiple path flow examples

📄 阅读： references/links.md
阅读时机： 配置流连接、链接样式、大小表示
包含内容：

链接基础和流表示
SourceId、TargetId和Value属性
使用SankeyLinkSettings进行链接样式设置
颜色、透明度和描边属性
流方向和大小
多路径流示例

Labels Customization

标签自定义

📄 Read: references/labels.md
When to read: Customizing node labels, text formatting
Contains:

Label configuration and positioning
Font properties (size, weight, family, color)
Text formatting and truncation
Label visibility controls
Custom label examples

📄 阅读： references/labels.md
阅读时机： 自定义节点标签、文本格式
包含内容：

标签配置和定位
字体属性（大小、粗细、字体族、颜色）
文本格式和截断
标签可见性控制
自定义标签示例

Legends Configuration

图例配置

📄 Read: references/legends.md
When to read: Adding and customizing diagram legends
Contains:

Legend configuration with SankeyLegendSettings
Visibility and positioning options
Legend item customization
Shape and color mapping
Interactive legend behavior
LegendItemRendering event

📄 阅读： references/legends.md
阅读时机： 添加和自定义图表图例
包含内容：

使用SankeyLegendSettings配置图例
可见性和定位选项
图例项自定义
形状和颜色映射
交互式图例行为
LegendItemRendering事件

Tooltips

工具提示

📄 Read: references/tooltips.md
When to read: Adding interactive tooltips, customizing tooltip content
Contains:

Tooltip configuration and triggers
Custom tooltip templates
Node and link tooltip differentiation
TooltipRendering event
Formatting tooltip content
Styling examples

📄 阅读： references/tooltips.md
阅读时机： 添加交互式工具提示、自定义工具提示内容
包含内容：

工具提示配置和触发方式
自定义工具提示模板
节点和链接工具提示的区分
TooltipRendering事件
工具提示内容格式化
样式示例

API Reference

API参考

📄 Read: references/api-reference.md
When to read: Looking up component properties, events, methods, and enums
Contains:

Complete SfSankey component API documentation
All properties with types and defaults
All 16 events with event arguments
All public methods (Export, Print, Refresh)
Data model classes (SankeyDataNode, SankeyDataLink, SankeyDataLabel)
Settings components (Node, Link, Label, Legend, Tooltip)
Enums and event arguments
Full component hierarchy
Complete working examples

📄 阅读： references/api-reference.md
阅读时机： 查询组件属性、事件、方法和枚举
包含内容：

完整的SfSankey组件API文档
所有属性及其类型和默认值
全部16个事件及其事件参数
所有公共方法（Export、Print、Refresh）
数据模型类（SankeyDataNode、SankeyDataLink、SankeyDataLabel）
设置组件（Node、Link、Label、Legend、Tooltip）
枚举和事件参数
完整的组件层次结构
完整的可运行示例

Customization

自定义

📄 Read: references/customization.md
When to read: Advanced styling, layout options, themes, RTL support
Contains:

Background styling (color and image)
Diagram dimensions and sizing
Layout orientation (horizontal/vertical)
RTL (Right-to-Left) support
Theme integration
Custom CSS classes
Responsive design patterns

📄 阅读： references/customization.md
阅读时机： 高级样式、布局选项、主题、RTL支持
包含内容：

背景样式（颜色和图片）
图表尺寸和大小设置
布局方向（水平/垂直）
RTL（从右到左）支持
主题集成
自定义CSS类
响应式设计模式

Events and Interactivity

事件与交互

📄 Read: references/events.md
When to read: Handling user interactions, customizing rendering, responding to changes
Contains:

Complete event reference (16 events)
Rendering events (NodeRendering, LinkRendering, LabelRendering)
Interaction events (NodeClick, LinkClick)
Hover events (NodeEnter/Leave, LinkEnter/Leave)
Lifecycle events (Created, SizeChanged)
Export events (PrintCompleted, ExportCompleted)
Event argument structures and examples

📄 阅读： references/events.md
阅读时机： 处理用户交互、自定义渲染、响应变更
包含内容：

完整的事件参考（共16个）
渲染事件（NodeRendering、LinkRendering、LabelRendering）
交互事件（NodeClick、LinkClick）
悬停事件（NodeEnter/Leave、LinkEnter/Leave）
生命周期事件（Created、SizeChanged）
导出/打印事件（PrintCompleted、ExportCompleted）
事件参数结构和示例

Print and Export

打印与导出

📄 Read: references/print-export.md
When to read: Exporting diagrams to images/PDF, printing functionality
Contains:

Printing Sankey diagrams
Export formats (PNG, JPEG, SVG, PDF)
Export method configuration
File naming and quality settings
Print/export events
Complete working examples

📄 阅读： references/print-export.md
阅读时机： 将图表导出为图片/PDF、打印功能
包含内容：

打印桑基图
导出格式（PNG、JPEG、SVG、PDF）
导出方法配置
文件命名和质量设置
打印/导出事件
完整的可运行示例

Quick Start Example

快速入门示例

Here's a minimal example showing energy source flow to energy types and end-use sectors:

razor

@page "/sankey-demo"
@using Syncfusion.Blazor.Sankey

<SfSankey Width="100%" Height="600px" Nodes="@Nodes" Links="@Links">
    <SankeyNodeSettings Width="20" Padding="20"></SankeyNodeSettings>
    <SankeyLinkSettings Opacity="0.4"></SankeyLinkSettings>
</SfSankey>

@code {
    public List<SankeyDataNode> Nodes = new List<SankeyDataNode>();
    public List<SankeyDataLink> Links = new List<SankeyDataLink>();

    protected override void OnInitialized()
    {
        // Define nodes
        Nodes = new List<SankeyDataNode>()
        {
            new SankeyDataNode() { Id = "Solar", Label = new SankeyDataLabel() { Text = "Solar" } },
            new SankeyDataNode() { Id = "Wind", Label = new SankeyDataLabel() { Text = "Wind" } },
            new SankeyDataNode() { Id = "Hydro", Label = new SankeyDataLabel() { Text = "Hydro" } },
            new SankeyDataNode() { Id = "Electricity", Label = new SankeyDataLabel() { Text = "Electricity" } },
            new SankeyDataNode() { Id = "Heat", Label = new SankeyDataLabel() { Text = "Heat" } },
            new SankeyDataNode() { Id = "Residential", Label = new SankeyDataLabel() { Text = "Residential" } },
            new SankeyDataNode() { Id = "Commercial", Label = new SankeyDataLabel() { Text = "Commercial" } },
            new SankeyDataNode() { Id = "Industrial", Label = new SankeyDataLabel() { Text = "Industrial" } }
        };

        // Define links (flows)
        Links = new List<SankeyDataLink>()
        {
            new SankeyDataLink() { SourceId = "Solar", TargetId = "Electricity", Value = 30 },
            new SankeyDataLink() { SourceId = "Wind", TargetId = "Electricity", Value = 45 },
            new SankeyDataLink() { SourceId = "Hydro", TargetId = "Electricity", Value = 25 },
            new SankeyDataLink() { SourceId = "Solar", TargetId = "Heat", Value = 15 },
            new SankeyDataLink() { SourceId = "Electricity", TargetId = "Residential", Value = 35 },
            new SankeyDataLink() { SourceId = "Electricity", TargetId = "Commercial", Value = 30 },
            new SankeyDataLink() { SourceId = "Electricity", TargetId = "Industrial", Value = 35 },
            new SankeyDataLink() { SourceId = "Heat", TargetId = "Residential", Value = 10 },
            new SankeyDataLink() { SourceId = "Heat", TargetId = "Commercial", Value = 5 }
        };
    }
}

以下是一个展示能源来源到能源类型再到终端使用部门的最小示例：

razor

@page "/sankey-demo"
@using Syncfusion.Blazor.Sankey

<SfSankey Width="100%" Height="600px" Nodes="@Nodes" Links="@Links">
    <SankeyNodeSettings Width="20" Padding="20"></SankeyNodeSettings>
    <SankeyLinkSettings Opacity="0.4"></SankeyLinkSettings>
</SfSankey>

@code {
    public List<SankeyDataNode> Nodes = new List<SankeyDataNode>();
    public List<SankeyDataLink> Links = new List<SankeyDataLink>();

    protected override void OnInitialized()
    {
        // Define nodes
        Nodes = new List<SankeyDataNode>()
        {
            new SankeyDataNode() { Id = "Solar", Label = new SankeyDataLabel() { Text = "Solar" } },
            new SankeyDataNode() { Id = "Wind", Label = new SankeyDataLabel() { Text = "Wind" } },
            new SankeyDataNode() { Id = "Hydro", Label = new SankeyDataLabel() { Text = "Hydro" } },
            new SankeyDataNode() { Id = "Electricity", Label = new SankeyDataLabel() { Text = "Electricity" } },
            new SankeyDataNode() { Id = "Heat", Label = new SankeyDataLabel() { Text = "Heat" } },
            new SankeyDataNode() { Id = "Residential", Label = new SankeyDataLabel() { Text = "Residential" } },
            new SankeyDataNode() { Id = "Commercial", Label = new SankeyDataLabel() { Text = "Commercial" } },
            new SankeyDataNode() { Id = "Industrial", Label = new SankeyDataLabel() { Text = "Industrial" } }
        };

        // Define links (flows)
        Links = new List<SankeyDataLink>()
        {
            new SankeyDataLink() { SourceId = "Solar", TargetId = "Electricity", Value = 30 },
            new SankeyDataLink() { SourceId = "Wind", TargetId = "Electricity", Value = 45 },
            new SankeyDataLink() { SourceId = "Hydro", TargetId = "Electricity", Value = 25 },
            new SankeyDataLink() { SourceId = "Solar", TargetId = "Heat", Value = 15 },
            new SankeyDataLink() { SourceId = "Electricity", TargetId = "Residential", Value = 35 },
            new SankeyDataLink() { SourceId = "Electricity", TargetId = "Commercial", Value = 30 },
            new SankeyDataLink() { SourceId = "Electricity", TargetId = "Industrial", Value = 35 },
            new SankeyDataLink() { SourceId = "Heat", TargetId = "Residential", Value = 10 },
            new SankeyDataLink() { SourceId = "Heat", TargetId = "Commercial", Value = 5 }
        };
    }
}

Common Patterns

常见模式

Pattern 1: Simple Flow Diagram

模式1：简单流图

razor

<SfSankey Nodes="@Nodes" Links="@Links" Width="800px" Height="400px">
</SfSankey>

razor

<SfSankey Nodes="@Nodes" Links="@Links" Width="800px" Height="400px">
</SfSankey>

Pattern 2: Styled Sankey with Custom Colors

模式2：带有自定义颜色的样式化桑基图

razor

<SfSankey Nodes="@Nodes" Links="@Links" BackgroundColor="#f5f5f5">
    <SankeyNodeSettings Color="#2e7d32" Width="15" Padding="25"></SankeyNodeSettings>
    <SankeyLinkSettings Color="#1976d2" Opacity="0.3"></SankeyLinkSettings>
    <SankeyLabelSettings Color="#000000" FontSize="14px" FontWeight="500"></SankeyLabelSettings>
</SfSankey>

razor

<SfSankey Nodes="@Nodes" Links="@Links" BackgroundColor="#f5f5f5">
    <SankeyNodeSettings Color="#2e7d32" Width="15" Padding="25"></SankeyNodeSettings>
    <SankeyLinkSettings Color="#1976d2" Opacity="0.3"></SankeyLinkSettings>
    <SankeyLabelSettings Color="#000000" FontSize="14px" FontWeight="500"></SankeyLabelSettings>
</SfSankey>

Pattern 3: Interactive Sankey with Events

模式3：带有事件的交互式桑基图

razor

<SfSankey Nodes="@Nodes" Links="@Links" NodeClick="OnNodeClick" LinkClick="OnLinkClick">
    <SankeyTooltipSettings Visible="true"></SankeyTooltipSettings>
</SfSankey>

@code {
    private void OnNodeClick(NodeClickEventArgs args)
    {
        Console.WriteLine($"Node clicked: {args.Node.Id}");
    }

    private void OnLinkClick(LinkClickEventArgs args)
    {
        Console.WriteLine($"Link clicked: {args.Link.SourceId} -> {args.Link.TargetId}");
    }
}

razor

<SfSankey Nodes="@Nodes" Links="@Links" NodeClick="OnNodeClick" LinkClick="OnLinkClick">
    <SankeyTooltipSettings Visible="true"></SankeyTooltipSettings>
</SfSankey>

@code {
    private void OnNodeClick(NodeClickEventArgs args)
    {
        Console.WriteLine($"Node clicked: {args.Node.Id}");
    }

    private void OnLinkClick(LinkClickEventArgs args)
    {
        Console.WriteLine($"Link clicked: {args.Link.SourceId} -> {args.Link.TargetId}");
    }
}

Pattern 4: Vertical Orientation

模式4：垂直方向

razor

<SfSankey Nodes="@Nodes" Links="@Links" Orientation="SankeyOrientation.Vertical">
    <SankeyNodeSettings Width="30" Padding="15"></SankeyNodeSettings>
</SfSankey>

razor

<SfSankey Nodes="@Nodes" Links="@Links" Orientation="SankeyOrientation.Vertical">
    <SankeyNodeSettings Width="30" Padding="15"></SankeyNodeSettings>
</SfSankey>

Pattern 5: With Legend

模式5：带图例

razor

<SfSankey Nodes="@Nodes" Links="@Links">
    <SankeyLegendSettings Visible="true" Position="LegendPosition.Bottom"></SankeyLegendSettings>
</SfSankey>

razor

<SfSankey Nodes="@Nodes" Links="@Links">
    <SankeyLegendSettings Visible="true" Position="LegendPosition.Bottom"></SankeyLegendSettings>
</SfSankey>

Complete API Properties Reference

完整API属性参考

SfSankey Component Properties

SfSankey组件属性

Data Properties

数据属性

Property	Type	Default	Description
`Nodes`	`List<SankeyDataNode>`	null	Collection of nodes (entities/categories)
`Links`	`List<SankeyDataLink>`	null	Collection of links (flows between nodes)

属性	类型	默认值	描述
`Nodes`	`List<SankeyDataNode>`	null	节点（实体/类别）集合
`Links`	`List<SankeyDataLink>`	null	链接（节点间的流）集合

Layout & Sizing Properties

布局与尺寸属性

Property	Type	Default	Description
`Width`	`string`	"100%"	Diagram width (pixels or percentage)
`Height`	`string`	"100%"	Diagram height (pixels or percentage)
`Orientation`	`SankeyOrientation`	Auto	Layout direction (Auto/Horizontal/Vertical)
`EnableAutoLayout`	`bool`	true	Enable/disable automatic layout

属性	类型	默认值	描述
`Width`	`string`	"100%"	图表宽度（像素或百分比）
`Height`	`string`	"100%"	图表高度（像素或百分比）
`Orientation`	`SankeyOrientation`	Auto	布局方向（自动/水平/垂直）
`EnableAutoLayout`	`bool`	true	启用/禁用自动布局

Styling Properties

样式属性

Property	Type	Default	Description
`BackgroundColor`	`string`	Theme default	Background color
`BackgroundImage`	`string`	""	Background image URL
`BorderColor`	`string`	null	Border color
`BorderWidth`	`double`	1	Border width in pixels
`Theme`	`Theme`	Fluent2	Chart theme
`CssClass`	`string`	""	Custom CSS class

属性	类型	默认值	描述
`BackgroundColor`	`string`	主题默认值	背景颜色
`BackgroundImage`	`string`	""	背景图片URL
`BorderColor`	`string`	null	边框颜色
`BorderWidth`	`double`	1	边框宽度（像素）
`Theme`	`Theme`	Fluent2	图表主题
`CssClass`	`string`	""	自定义CSS类

Title & Content Properties

标题与内容属性

Property	Type	Default	Description
`Title`	`string`	""	Main title text
`SubTitle`	`string`	""	Subtitle text
`LinkCurvature`	`double`	1	Link curve intensity (0-1)

属性	类型	默认值	描述
`Title`	`string`	""	主标题文本
`SubTitle`	`string`	""	副标题文本
`LinkCurvature`	`double`	1	链接曲线强度（0-1）

Animation Properties

动画属性

Property	Type	Default	Description
`EnableAnimation`	`bool`	true	Enable/disable animations
`AnimationDuration`	`double`	2000	Animation duration (ms)
`AnimationDelay`	`double`	0	Animation delay (ms)

属性	类型	默认值	描述
`EnableAnimation`	`bool`	true	启用/禁用动画
`AnimationDuration`	`double`	2000	动画时长（毫秒）
`AnimationDelay`	`double`	0	动画延迟（毫秒）

Accessibility & Interaction Properties

无障碍与交互属性

Property	Type	Default	Description
`EnableRTL`	`bool`	false	Enable right-to-left layout
`TabIndex`	`double`	0	Keyboard tab index
`AccessibilityDescription`	`string`	""	Accessibility description
`ID`	`string`	Auto-generated	Component ID

属性	类型	默认值	描述
`EnableRTL`	`bool`	false	启用从右到左布局
`TabIndex`	`double`	0	键盘Tab索引
`AccessibilityDescription`	`string`	""	无障碍描述
`ID`	`string`	自动生成	组件ID

Events Reference (16 Total Events)

事件参考（共16个事件）

Rendering Events

渲染事件

NodeRendering
-
```
SankeyNodeRenderEventArgs
```
- Fired when a node is rendered
LinkRendering
-
```
SankeyLinkRenderEventArgs
```
- Fired when a link is rendered

LabelRendering
-

SankeyLabelRenderEventArgs

- Fired when a label is rendered

LegendItemRendering
-

SankeyLegendRenderEventArgs

- Fired before legend item renders

NodeRendering
-
```
SankeyNodeRenderEventArgs
```
- 节点渲染时触发
LinkRendering
-
```
SankeyLinkRenderEventArgs
```
- 链接渲染时触发

LabelRendering
-

SankeyLabelRenderEventArgs

- 标签渲染时触发

LegendItemRendering
-

SankeyLegendRenderEventArgs

- 图例项渲染前触发

Mouse Interaction Events

鼠标交互事件

NodeClick
-
```
SankeyNodeEventArgs
```
- Fired when node is clicked
LinkClick
-
```
SankeyLinkEventArgs
```
- Fired when link is clicked
NodeEnter
-
```
SankeyNodeEventArgs
```
- Fired when mouse enters node
NodeLeave
-
```
SankeyNodeEventArgs
```
- Fired when mouse leaves node
LinkEnter
-
```
SankeyLinkEventArgs
```
- Fired when mouse enters link
LinkLeave
-
```
SankeyLinkEventArgs
```
- Fired when mouse leaves link

NodeClick
-
```
SankeyNodeEventArgs
```
- 节点被点击时触发
LinkClick
-
```
SankeyLinkEventArgs
```
- 链接被点击时触发
NodeEnter
-
```
SankeyNodeEventArgs
```
- 鼠标进入节点时触发
NodeLeave
-
```
SankeyNodeEventArgs
```
- 鼠标离开节点时触发
LinkEnter
-
```
SankeyLinkEventArgs
```
- 鼠标进入链接时触发
LinkLeave
-
```
SankeyLinkEventArgs
```
- 鼠标离开链接时触发

UI Events

UI事件

TooltipRendering
-

SankeyTooltipRenderEventArgs

- Fired when tooltip renders

LegendItemHover
-

SankeyLegendItemHoverEventArgs

- Fired on legend hover

TooltipRendering
-

SankeyTooltipRenderEventArgs

- 工具提示渲染时触发

LegendItemHover
-

SankeyLegendItemHoverEventArgs

- 鼠标悬停在图例上时触发

Lifecycle Events

生命周期事件

Created
-
```
Action
```
- Fired when component is created
SizeChanged
-
```
SankeySizeChangedEventArgs
```
- Fired when component size changes

Created
-
```
Action
```
- 组件创建完成时触发
SizeChanged
-
```
SankeySizeChangedEventArgs
```
- 组件大小变更时触发

Export/Print Events

导出/打印事件

PrintCompleted
-
```
Action
```
- Fired when print completes
ExportCompleted
-
```
SankeyExportedEventArgs
```
- Fired when export completes

PrintCompleted
-
```
Action
```
- 打印完成时触发
ExportCompleted
-
```
SankeyExportedEventArgs
```
- 导出完成时触发

Public Methods

公共方法

Method	Parameters	Returns	Description
`ExportAsync`	`type (SankeyExportType), fileName, orientation?, allowDownload?, isBase64?`	`Task`	Export to PNG/JPEG/SVG/PDF
`PrintAsync`	`elementRef?`	`Task`	Print the diagram
`RefreshAsync`	None	`Task`	Re-render component

方法	参数	返回值	描述
`ExportAsync`	`type (SankeyExportType), fileName, orientation?, allowDownload?, isBase64?`	`Task`	导出为PNG/JPEG/SVG/PDF
`PrintAsync`	`elementRef?`	`Task`	打印图表
`RefreshAsync`	None	`Task`	重新渲染组件

Settings Objects

设置对象

SankeyNodeSettings: Node appearance (Width, Padding, Alignment, Color, Offset)
SankeyLinkSettings: Link appearance (Color, Opacity, HighlightOpacity, InactiveOpacity, ColorType)
SankeyLabelSettings: Label styling (Visible, FontSize, FontFamily, FontWeight, Color, Padding)
SankeyMargin: Chart margins (Left, Right, Top, Bottom)
SankeyTitleStyle: Title styling (FontSize, FontFamily, FontWeight, FontStyle, Color)
SankeySubtitleStyle: Subtitle styling (FontSize, FontFamily, FontWeight, FontStyle, Color)
SankeyLegendSettings: Legend configuration (Visible, Position, Height, Width)
SankeyTooltipSettings: Tooltip configuration (Enable, Fill, Opacity)

SankeyNodeSettings：节点外观（宽度、内边距、对齐方式、颜色、偏移量）
SankeyLinkSettings：链接外观（颜色、透明度、高亮透明度、非活动透明度、颜色类型）
SankeyLabelSettings：标签样式（可见性、字体大小、字体族、字体粗细、颜色、内边距）
SankeyMargin：图表边距（左、右、上、下）
SankeyTitleStyle：标题样式（字体大小、字体族、字体粗细、字体样式、颜色）
SankeySubtitleStyle：副标题样式（字体大小、字体族、字体粗细、字体样式、颜色）
SankeyLegendSettings：图例配置（可见性、位置、高度、宽度）
SankeyTooltipSettings：工具提示配置（启用、填充色、透明度）

Data Models

数据模型

Model	Key Properties	Description
SankeyDataNode	`Id` , `Label` (SankeyDataLabel), `Color` , `Width`	Represents a node
SankeyDataLabel	`Text`	Node label text
SankeyDataLink	`SourceId` , `TargetId` , `Value` , `Color` , `Opacity`	Represents a link/connection

模型	核心属性	描述
SankeyDataNode	`Id` , `Label` (SankeyDataLabel), `Color` , `Width`	表示一个节点
SankeyDataLabel	`Text`	节点标签文本
SankeyDataLink	`SourceId` , `TargetId` , `Value` , `Color` , `Opacity`	表示一个链接/连接

Enums

枚举

Enum	Values	Description
SankeyOrientation	Auto, Horizontal, Vertical	Layout direction
SankeyNodeAlign	None, Left, Center, Right	Node alignment
SankeyColorType	Static, Source	Color mapping type
SankeyLegendPosition	Top, Bottom, Left, Right	Legend position
SankeyExportType	PNG, JPEG, SVG, PDF	Export format
Theme	Bootstrap5, Fluent2, Material, Tailwind, Fabric, etc.	Chart theme

枚举	值	描述
SankeyOrientation	Auto, Horizontal, Vertical	布局方向
SankeyNodeAlign	None, Left, Center, Right	节点对齐方式
SankeyColorType	Static, Source	颜色映射类型
SankeyLegendPosition	Top, Bottom, Left, Right	图例位置
SankeyExportType	PNG, JPEG, SVG, PDF	导出格式
Theme	Bootstrap5, Fluent2, Material, Tailwind, Fabric, etc.	图表主题

Common Use Cases

常见用例

Use Case 1: Energy Flow Visualization

用例1：能源流可视化

Visualize energy sources flowing to energy types and then to end-use sectors (residential, commercial, industrial).

可视化能源来源到能源类型再到终端使用部门（住宅、商业、工业）的流。

Use Case 2: Website Traffic Analysis

用例2：网站流量分析

Show user traffic flow from entry points (search, social, direct) through pages to conversion goals.

展示用户从入口点（搜索、社交、直接访问）到页面再到转化目标的流量流。

Use Case 3: Budget Allocation

用例3：预算分配

Display budget flows from income sources through categories to final expenses.

展示从收入来源到各类别再到最终支出的预算流。

Use Case 4: Supply Chain Flow

用例4：供应链流

Illustrate product movement from suppliers through manufacturing to distribution channels.

展示产品从供应商到制造再到分销渠道的运输流。

Use Case 5: User Journey Mapping

用例5：用户旅程映射

Map user flow through application states, showing drop-offs and conversions at each stage.

绘制用户在应用状态中的流，展示每个阶段的流失和转化情况。

Use Case 6: Data Pipeline Visualization

用例6：数据管道可视化

Show data flow through processing stages in ETL pipelines or data transformation workflows.

展示ETL管道或数据转换工作流中数据通过处理阶段的流。

Data Structure Requirements

数据结构要求

Nodes

节点

Each node must have:

Unique
```
Id
```
(string)
```
Label
```
with
```
Text
```
property

每个节点必须包含：

唯一的
```
Id
```
（字符串）
带有
```
Text
```
属性的
```
Label
```

链接

Each link must have:

```
SourceId
```
matching a node Id
```
TargetId
```
matching a node Id
```
Value
```
representing flow magnitude (numeric)

每个链接必须包含：

与某个节点Id匹配的
```
SourceId
```
与某个节点Id匹配的
```
TargetId
```
表示流大小的
```
Value
```
（数值型）

Validation Tips

验证提示

Ensure all link SourceId and TargetId reference existing node Ids
Values should be positive numbers
Avoid circular flows (node A → B → A) for clarity
Node Ids are case-sensitive

确保所有链接的SourceId和TargetId都引用了存在的节点Id
值应为正数
为了清晰，避免循环流（节点A→B→A）
节点Id区分大小写

Troubleshooting Quick Tips

故障排除快速提示

Diagram not showing:

Verify Nodes and Links are properly initialized
Check that SfSankey has Width and Height set
Ensure Syncfusion services are registered in Program.cs

Links not appearing:

Confirm SourceId and TargetId match existing node Ids exactly
Check that Value is greater than 0
Verify Links collection is bound to component

Styling not applying:

Ensure theme CSS is referenced in App.razor or layout
Check for conflicting CSS styles
Verify color format is valid (hex, rgb, named color)

Events not firing:

Confirm event handler method signature matches event args type
Check that event is properly bound in component markup
Verify component interactivity mode for .NET 8+ projects

图表未显示：

验证Nodes和Links是否已正确初始化
检查SfSankey是否设置了Width和Height
确保Syncfusion服务已在Program.cs中注册

链接未显示：

确认SourceId和TargetId与现有节点Id完全匹配
检查Value是否大于0
验证Links集合是否已绑定到组件

样式未生效：

确保主题CSS已在App.razor或布局中引用
检查是否存在冲突的CSS样式
验证颜色格式是否有效（十六进制、rgb、命名颜色）

事件未触发：

确认事件处理方法的签名与事件参数类型匹配
检查事件是否已正确绑定到组件标记中
验证.NET 8+项目的组件交互模式

Next Steps

下一步

For detailed implementation of specific features, refer to the reference files listed in the Navigation Guide above. Each reference provides complete, self-contained documentation with examples and best practices.

如需详细实现特定功能，请参考上述导航指南中列出的参考文件。每个参考文件都提供了完整、独立的文档，包含示例和最佳实践。

Resources

资源

Documentation & References

文档与参考

Official Documentation: https://blazor.syncfusion.com/documentation/sankey-chart/getting-started
Component Demos: https://blazor.syncfusion.com/demos/sankey-chart/default-functionalities
Official API Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Sankey.html
Local API Reference: references/api-reference.md - Comprehensive local API documentation with all properties, events, methods, and examples

官方文档：https://blazor.syncfusion.com/documentation/sankey-chart/getting-started
组件演示：https://blazor.syncfusion.com/demos/sankey-chart/default-functionalities
官方API参考：https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Sankey.html
本地API参考：references/api-reference.md - 包含所有属性、事件、方法和示例的综合本地API文档

Community & Support

社区与支持

GitHub Examples: https://github.com/SyncfusionExamples/
Support: https://www.syncfusion.com/support/
NuGet Package: https://www.nuget.org/packages/Syncfusion.Blazor.Sankey/

GitHub示例：https://github.com/SyncfusionExamples/
支持：https://www.syncfusion.com/support/
NuGet包：https://www.nuget.org/packages/Syncfusion.Blazor.Sankey/