syncfusion-angular-sankey

实现 Syncfusion Angular Sankey

Sankey 组件使用节点和链接来可视化实体之间的定向流动和关系。它非常适合展示流程、能源分配、资源分配和层级关系，其中链接宽度按比例表示数量。

何时使用此技能

在以下情况下使用 Sankey 组件：

• 可视化流量数据： 展示定向流动，链接宽度按比例表示数量
• 展示流程步骤： 表示多阶段流程或工作流
• 分析资源分配： 可视化资源在系统中的流动
• 比较类别： 展示类别之间的关系和分布
• 展示层级结构： 呈现带有加权连接的组织结构或层级结构

组件概述

Sankey 图由以下部分组成：

• 节点： 表示来源、汇点和中间实体（可自定义宽度、颜色和标签）
• 链接： 表示节点之间的流动（宽度与数值成正比，可自定义曲率和颜色）
• 标签： 以可配置的位置和样式显示节点和链接信息
• 图例： 可选图例，用于对节点进行分类
• 工具提示： 悬停或点击时显示上下文信息

文档和导航指南

API 参考

📄 阅读： references/api-reference.md

快速入门

📄 阅读： references/getting-started.md

• 安装 @syncfusion/ej2-angular-charts 包
• 配置 Angular 19+ 独立组件
• 初始化基本 Sankey 并进行首次渲染
• 注入模块（Tooltip、Legend 服务）
• 绑定初始数据
• 何时使用： 从这里开始进行配置，并查看首个可运行示例

节点和链接

📄 阅读： references/nodes-and-links.md

• 定义节点结构（id、label、value）
• 自定义节点外观（宽度、内边距、颜色、不透明度）
• 设置单个节点样式和覆盖项
• 定义节点之间的链接关系
• 配置链接样式（曲率、不透明度、颜色）
• 节点偏移和定位
• 何时使用： 需要配置图表结构、自定义节点/链接或控制位置时

外观和尺寸

📄 阅读： references/appearance-and-sizing.md

• 设置组件尺寸（宽度、高度、自适应尺寸）
• 自定义背景颜色和边框
• 控制边距
• 应用主题（Material、Bootstrap、Tailwind 等）
• 全局节点和链接样式
• 何时使用： 设置图表整体样式、创建自适应布局或集成主题时

标签、图例和工具提示

📄 阅读： references/labels-legends-tooltips.md

• 设置节点和链接标签的位置与样式
• 配置图例及其位置（上、下、左、右）
• 设置图例高亮行为
• 自定义工具提示模板和内容
• 交互元素行为
• 何时使用： 添加标签、图例或工具提示以提供更丰富的上下文时

自定义和样式设置

📄 阅读： references/customization-and-styling.md

• 自定义元素级样式（分别设置节点和链接样式）
• 使用预定义调色板和颜色映射
• 基于数据进行条件样式设置
• 创建自定义主题
• 基于类别的样式策略
• 优化大型图表的性能
• 何时使用： 进行高级样式设置、颜色映射或动态外观调整时

事件与交互

📄 阅读： references/events-and-interactions.md

• 生命周期事件（load、loaded）
• 交互事件（nodeClick、nodeEnter、nodeLeave、linkClick）
• 用于动态样式的渲染事件（nodeRendering、linkRendering）
• 导出和打印事件
• 事件处理模式
• 适用场景： 处理用户交互、触发自定义逻辑，或响应图表生命周期

高级功能

📄 阅读： references/advanced-features.md

• 水平和垂直方向
• 支持从右向左（RTL）布局
• 打印和导出功能（PNG、JPEG、SVG、PDF）
• 无障碍功能（符合 WCAG 标准、屏幕阅读器）
• 优化大量节点和链接时的性能
• 边界情况和故障排除
• 适用场景： 多语言支持、导出需求、无障碍需求或性能调优

快速入门示例

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
  };
}

常见模式

模式 1：按类别显示流程

// 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 }
];

模式 2：根据数值动态设置样式

// 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';
};

模式 3：交互式高亮

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

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

关键配置属性

属性	类型	用途
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	链接定义（手动属性绑定）

常见用例

1. 能源分配： 显示从发电端（太阳能、核能、天然气）到消费端（住宅、商业、工业）的电力流动
2. 供应链： 展示产品经过制造 → 仓库 → 配送中心 → 零售商店的流转过程
3. 资金流： 显示资金从来源（收入、投资）→ 运营 → 支出的流转过程
4. 工作流程： 表示包含分支路径的多阶段流程，并分析瓶颈
5. 用户旅程： 跟踪用户在应用各个板块中的流转（落地页 → 注册 → 入门引导 → 功能）
6. 资源分配： 展示预算或资源在各部门或项目间的分配情况
7. 层级结构： 通过带权关系展示组织或系统层级

---

相关文档： 有关其他数据可视化组件，请参阅 implementing-syncfusion-angular-components。