Back to Details

syncfusion-angular-sankey

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing Syncfusion Angular Sankey

实现Syncfusion Angular Sankey

The Sankey component visualizes directional flow and relationships between entities using nodes and links. Perfect for displaying process flows, energy distribution, resource allocation, and hierarchical relationships with proportional link widths representing quantities.
Sankey组件通过节点和链接可视化实体间的定向流与关系，非常适合展示流程、能源分配、资源分配以及层级关系，其中链接宽度与对应数量成正比。

When to Use This Skill

何时使用该组件

Use the Sankey component when you need to:
  • Visualize Flow Data: Display directional flow with proportional link widths representing quantities
  • Show Process Steps: Represent multi-stage processes or workflows
  • Analyze Resource Allocation: Visualize how resources move through systems
  • Compare Categories: Show relationships and distributions between categories
  • Display Hierarchies: Render organizational or hierarchical structures with weighted connections
当你需要以下功能时，可使用Sankey组件：
  • 可视化流数据：展示定向流，链接宽度与对应数量成正比
  • 展示流程步骤：呈现多阶段流程或工作流
  • 分析资源分配：可视化资源在系统中的流转路径
  • 对比分类：展示分类间的关系与分布情况
  • 展示层级结构：渲染带有加权连接的组织或层级结构

Component Overview

组件概述

The Sankey diagram consists of:
  • Nodes: Represent sources, sinks, and intermediate entities (customizable width, color, labels)
  • Links: Represent flow between nodes (width proportional to value, customizable curvature and color)
  • Labels: Display node and link information with configurable positioning and styling
  • Legend: Optional legend for categorizing nodes
  • Tooltips: Contextual information on hover or click
Sankey图包含以下部分：
  • 节点：代表源、汇和中间实体（可自定义宽度、颜色、标签）
  • 链接：代表节点间的流（宽度与数值成正比，可自定义曲率和颜色）
  • 标签：展示节点和链接信息，可配置位置与样式
  • 图例：可选组件，用于对节点进行分类
  • 工具提示：悬停或点击时显示上下文信息

Documentation and Navigation Guide

文档与导航指南

API Reference

API参考

📄 Read: references/api-reference.md
📄 阅读：references/api-reference.md

Getting Started

快速入门

📄 Read: references/getting-started.md
  • Installation of 
    @syncfusion/ej2-angular-charts
    package
  • Angular 19+ standalone component setup
  • Basic Sankey initialization and first render
  • Module injection (Tooltip, Legend services)
  • Initial data binding
  • When to use: Start here for setup and first working example
📄 阅读：references/getting-started.md
  • 安装
    @syncfusion/ej2-angular-charts
    包
  • Angular 19+独立组件设置
  • Sankey基础初始化与首次渲染
  • 模块注入（Tooltip、Legend服务）
  • 初始数据绑定
  • 适用场景：从这里开始进行组件搭建和第一个示例开发

Nodes and Links

节点与链接

📄 Read: references/nodes-and-links.md
  • Define node structure (id, label, value)
  • Customize node appearance (width, padding, colors, opacity)
  • Individual node styling and overrides
  • Define link relationships between nodes
  • Configure link styling (curvature, opacity, color)
  • Node offset and positioning
  • When to use: Need to configure diagram structure, customize nodes/links, or control positioning
📄 阅读：references/nodes-and-links.md
  • 定义节点结构（id、标签、值）
  • 自定义节点外观（宽度、内边距、颜色、透明度）
  • 单个节点样式与重写设置
  • 定义节点间的链接关系
  • 配置链接样式（曲率、透明度、颜色）
  • 节点偏移与定位
  • 适用场景：需要配置图结构、自定义节点/链接或控制定位时

Appearance and Sizing

外观与尺寸

📄 Read: references/appearance-and-sizing.md
  • Set component dimensions (width, height, responsive sizing)
  • Background color and border customization
  • Margin control
  • Theme application (Material, Bootstrap, Tailwind, etc.)
  • Global node and link styles
  • When to use: Styling the overall diagram, responsive layouts, or theme integration
📄 阅读：references/appearance-and-sizing.md
  • 设置组件尺寸（宽度、高度、响应式尺寸）
  • 背景颜色与边框自定义
  • 边距控制
  • 主题应用（Material、Bootstrap、Tailwind等）
  • 全局节点与链接样式
  • 适用场景：对整体图进行样式设置、响应式布局或主题集成时

Labels, Legends, and Tooltips

标签、图例与工具提示

📄 Read: references/labels-legends-tooltips.md
  • Label positioning and styling for nodes and links
  • Legend configuration and positioning (top, bottom, left, right)
  • Legend highlighting behavior
  • Tooltip templates and content customization
  • Interactive element behaviors
  • When to use: Adding labels, legends, or tooltips for better context
📄 阅读：references/labels-legends-tooltips.md
  • 节点与链接的标签定位和样式设置
  • 图例配置与定位（顶部、底部、左侧、右侧）
  • 图例高亮行为
  • 工具提示模板与内容自定义
  • 交互元素行为
  • 适用场景：添加标签、图例或工具提示以提升上下文信息时

Customization and Styling

自定义与样式设置

📄 Read: references/customization-and-styling.md
  • Element-level customization (per-node, per-link styling)
  • Predefined color palettes and mapping
  • Data-driven conditional styling
  • Custom theme creation
  • Category-based styling strategies
  • Performance optimization for large diagrams
  • When to use: Advanced styling, color mapping, or dynamic appearance changes
📄 阅读：references/customization-and-styling.md
  • 元素级自定义（单个节点、单个链接样式）
  • 预定义调色板与映射
  • 基于数据的条件样式
  • 自定义主题创建
  • 基于分类的样式策略
  • 大型图的性能优化
  • 适用场景：高级样式设置、颜色映射或动态外观变更时

Events and Interactions

事件与交互

📄 Read: references/events-and-interactions.md
  • Lifecycle events (load, loaded)
  • Interaction events (nodeClick, nodeEnter, nodeLeave, linkClick)
  • Rendering events for dynamic styling (nodeRendering, linkRendering)
  • Export and print events
  • Event handling patterns
  • When to use: Handle user interactions, trigger custom logic, or respond to diagram lifecycle
📄 阅读：references/events-and-interactions.md
  • 生命周期事件（load、loaded）
  • 交互事件（nodeClick、nodeEnter、nodeLeave、linkClick）
  • 用于动态样式的渲染事件（nodeRendering、linkRendering）
  • 导出与打印事件
  • 事件处理模式
  • 适用场景：处理用户交互、触发自定义逻辑或响应图生命周期时

Advanced Features

高级功能

📄 Read: references/advanced-features.md
  • Horizontal and vertical orientation
  • Right-to-left (RTL) layout support
  • Print and export functionality (PNG, JPEG, SVG, PDF)
  • Accessibility features (WCAG compliance, screen readers)
  • Performance optimization for many nodes/links
  • Edge cases and troubleshooting
  • When to use: Multi-language support, export requirements, accessibility needs, or performance tuning
📄 阅读：references/advanced-features.md
  • 水平与垂直方向布局
  • 从右到左（RTL）布局支持
  • 打印与导出功能（PNG、JPEG、SVG、PDF）
  • 无障碍功能（WCAG合规、屏幕阅读器支持）
  • 多节点/链接场景的性能优化
  • 边缘案例与故障排除
  • 适用场景：多语言支持、导出需求、无障碍需求或性能调优时

Quick Start Example

快速入门示例

typescript
import { Component, ViewEncapsulation } from '@angular/core';
import { SankeyAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
  imports: [SankeyAllModule],
  standalone: true,
  selector: 'app-sankey-demo',
  template: `<ejs-sankey [dataSource]="data" [nodeSettings]="nodeSettings"></ejs-sankey>`,
  encapsulation: ViewEncapsulation.None
})
export class SankeyDemoComponent {
  data: any[] = [
    { sourceID: 'S1', targetID: 'T1', value: 5 },
    { sourceID: 'S1', targetID: 'T2', value: 3 },
    { sourceID: 'S2', targetID: 'T1', value: 2 }
  ];

  nodeSettings: any = {
    width: 20,
    padding: 10
  };
}
typescript
import { Component, ViewEncapsulation } from '@angular/core';
import { SankeyAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
  imports: [SankeyAllModule],
  standalone: true,
  selector: 'app-sankey-demo',
  template: `<ejs-sankey [dataSource]="data" [nodeSettings]="nodeSettings"></ejs-sankey>`,
  encapsulation: ViewEncapsulation.None
})
export class SankeyDemoComponent {
  data: any[] = [
    { sourceID: 'S1', targetID: 'T1', value: 5 },
    { sourceID: 'S1', targetID: 'T2', value: 3 },
    { sourceID: 'S2', targetID: 'T1', value: 2 }
  ];

  nodeSettings: any = {
    width: 20,
    padding: 10
  };
}

Common Patterns

常见模式

Pattern 1: Flow Visualization with Categories

模式1：带分类的流可视化

typescript
// Define nodes with categories for legend grouping
const nodes = [
  { id: 'Power', label: { text: 'Power Plant' }, category: 'Source' },
  { id: 'Grid', label: { text: 'Grid' }, category: 'Intermediary' },
  { id: 'Home', label: { text: 'Households' }, category: 'Sink' }
];

// Links represent flow quantities
const links = [
  { sourceID: 'Power', targetID: 'Grid', value: 100 },
  { sourceID: 'Grid', targetID: 'Home', value: 80 }
];
typescript
// 定义带分类的节点，用于图例分组
const nodes = [
  { id: 'Power', label: { text: 'Power Plant' }, category: 'Source' },
  { id: 'Grid', label: { text: 'Grid' }, category: 'Intermediary' },
  { id: 'Home', label: { text: 'Households' }, category: 'Sink' }
];

// 链接代表流的数量
const links = [
  { sourceID: 'Power', targetID: 'Grid', value: 100 },
  { sourceID: 'Grid', targetID: 'Home', value: 80 }
];

Pattern 2: Dynamic Styling Based on Values

模式2：基于数值的动态样式

typescript
// Render event handler for value-based coloring
onNodeRendering = (args: INodeRenderingEventArgs) => {
  const value = args.node.value || 0;
  args.node.color = value > 100 ? '#00A651' : value > 50 ? '#FFB81C' : '#E81B23';
};
typescript
// 渲染事件处理器，实现基于数值的颜色设置
onNodeRendering = (args: INodeRenderingEventArgs) => {
  const value = args.node.value || 0;
  args.node.color = value > 100 ? '#00A651' : value > 50 ? '#FFB81C' : '#E81B23';
};

Pattern 3: Interactive Highlighting

模式3：交互式高亮

typescript
// Use opacity to emphasize relationships
onNodeEnter = (args: INodeEnterEventArgs) => {
  args.node.highlightOpacity = 1;
};

onNodeLeave = (args: INodeLeaveEventArgs) => {
  args.node.highlightOpacity = 0.3;
};
typescript
// 使用透明度强调关系
onNodeEnter = (args: INodeEnterEventArgs) => {
  args.node.highlightOpacity = 1;
};

onNodeLeave = (args: INodeLeaveEventArgs) => {
  args.node.highlightOpacity = 0.3;
};

Key Configuration Properties

关键配置属性

PropertyTypePurpose
width
stringComponent width ('700px', '100%', or '90%')
height
stringComponent height ('420px', '450px', or '100%')
title
stringMain title for the diagram
subTitle
stringSubtitle with descriptive text
orientation
stringFlow direction ('Horizontal' or 'Vertical')
enableRtl
booleanEnable right-to-left layout
theme
stringBuilt-in theme (Material, Bootstrap, Tailwind, HighContrast, etc.)
nodeStyle
ObjectGlobal node styling (width, padding, opacity, colors)
linkStyle
ObjectGlobal link styling (curvature, opacity, colorType)
labelSettings
ObjectLabel positioning and visibility
legendSettings
ObjectLegend configuration and positioning
tooltip
ObjectTooltip template and visibility settings
nodes
ArrayNode definitions (manual property binding)
links
ArrayLink definitions (manual property binding)
属性类型用途
width
string组件宽度（'700px'、'100%'或'90%'）
height
string组件高度（'420px'、'450px'或'100%'）
title
string图的主标题
subTitle
string带描述性文本的副标题
orientation
string流方向（'Horizontal'或'Vertical'）
enableRtl
boolean启用从右到左布局
theme
string内置主题（Material、Bootstrap、Tailwind、HighContrast等）
nodeStyle
Object全局节点样式（宽度、内边距、透明度、颜色）
linkStyle
Object全局链接样式（曲率、透明度、colorType）
labelSettings
Object标签定位与可见性设置
legendSettings
Object图例配置与定位设置
tooltip
Object工具提示模板与可见性设置
nodes
Array节点定义（手动属性绑定）
links
Array链接定义（手动属性绑定）

Common Use Cases

常见使用场景

  1. Energy Distribution: Show power flow from generation (Solar, Nuclear, Natural Gas) to consumption (Residential, Commercial, Industrial)
  2. Supply Chain: Visualize product movement through manufacturing → warehouses → distribution centers → retail stores
  3. Financial Flow: Display money transfers between sources (revenue, investment) → operations → expenses
  4. Process Workflows: Represent multi-stage processes with branching paths and bottleneck analysis
  5. User Journeys: Track user movement through application sections (landing → signup → onboarding → features)
  6. Resource Allocation: Show how budget or resources are distributed across departments or projects
  7. Hierarchical Structures: Visualize organizational or system hierarchies with weighted relationships
Related Documentation: See implementing-syncfusion-angular-components for other data visualization components.
  1. 能源分配：展示从发电端（太阳能、核能、天然气）到消费端（住宅、商业、工业）的电力流
  2. 供应链：可视化产品从制造→仓库→配送中心→零售店的流转路径
  3. 资金流：展示资金从来源（收入、投资）→运营→支出的流转
  4. 流程工作流：呈现多阶段流程，包含分支路径与瓶颈分析
  5. 用户旅程：追踪用户在应用各板块的移动路径（着陆页→注册→引导→功能使用）
  6. 资源分配：展示预算或资源在各部门或项目间的分配情况
  7. 层级结构：可视化带有加权关系的组织或系统层级
相关文档：查看implementing-syncfusion-angular-components获取其他数据可视化组件的信息。