syncfusion-aspnetcore-sankey

实现 Syncfusion Sankey Chart

Syncfusion Sankey Chart 是一个功能强大的可视化组件，用于展示类别之间带权重的流向和关系。它使用交互式节点表示实体，并通过链接展示连接关系，链接的视觉粗细与流量值成正比。非常适用于流程流向、供应链、能源分配，以及任何需要可视化流量大小的场景。

文档与导航指南

API 参考

📄 阅读： references/api-reference.md

• Sankey Chart 组件的完整 API 文档
• 构造函数和属性定义
• 事件属性和回调
• 配置选项和使用模式
• 相关设置类和数据结构

入门指南

📄 阅读： references/getting-started.md

• 安装和包配置
• Sankey Chart 基本初始化
• CSS 导入和主题配置
• 添加包含节点和链接的数据
• 首个可运行示例

节点自定义与样式设置

📄 阅读： references/nodes-customization.md

• 全局节点外观配置
• 单个节点样式覆盖
• 节点宽度、内边距和不透明度控制
• 使用 offset 属性设置节点位置
• 悬停时的交互式不透明度
• 动态节点渲染事件
• 为节点应用颜色

链接样式与配置

📄 阅读： references/links-styling.md

• 链接外观和不透明度属性
• 链接路径曲率控制
• 链接颜色类型（Source、Target、Blend）
• 链接值和粗细映射
• 使用渲染事件动态自定义链接
• 交互期间的不透明度控制
• 创建有意义的流量大小可视化表示

标签和图例配置

📄 阅读： references/labels-legend.md

• 标签可见性和字体样式
• 全局标签设置（大小、颜色、粗细）
• 单个节点标签自定义
• 动态标签渲染和修改
• 图例位置和显示选项
• 图例自定义（背景、不透明度、形状）
• 交互式图例高亮
• 动态图例项渲染

外观与主题

📄 阅读： references/appearance-theming.md

• 宽度和高度配置
• 使用百分比进行响应式尺寸设置
• 背景和边框自定义
• 边距配置
• 内置主题选择
• 配色方案和视觉样式
• 让图表适配不同设备

事件与交互

📄 阅读： references/events-interactions.md

• 生命周期事件（Load、Loaded）
• 节点和链接交互事件（点击、进入、离开）
• 用于自定义的渲染事件
• 标签和图例渲染事件
• 尺寸变化事件处理
• 导出和打印事件
• 完整的事件处理模式

方向与 RTL 支持

📄 阅读： references/orientation-rtl.md

• 水平和垂直方向选项
• 从右到左（RTL）布局支持
• 不同方向下的 RTL
• 面向国际化应用的布局镜像
• 本地化最佳实践

打印与导出

📄 阅读： references/print-export.md

• 将 Sankey Chart 打印为 PDF 或纸质文件
• 导出为 PNG、JPEG、SVG 和 PDF 格式
• 自定义文件名和格式选择
• 导出前后事件处理
• 根据使用场景选择格式
• 文件大小和质量方面的注意事项

无障碍

📄 阅读： references/accessibility.md

• 符合 WCAG 2.2 和 Section 508 标准
• 屏幕阅读器支持和 ARIA 属性
• 键盘导航快捷键
• 颜色对比度和移动设备无障碍支持
• WAI-ARIA 角色和属性
• 确保可视化具有包容性

快速开始

// ASP.NET Core - Basic Sankey Chart
@{
    var nodeData = new []
    {
        new { id = 0, label = "Source" },
        new { id = 1, label = "Process" },
        new { id = 2, label = "Target" }
    };

    var linkData = new []
    {
        new { sourceNodeID = 0, targetNodeID = 1, value = 100 },
        new { sourceNodeID = 1, targetNodeID = 2, value = 80 }
    };
}

<ejs-sankey id="container" width="100%" height="420px">
    <e-sankey-margin top="50" bottom="50"></e-sankey-margin>
    <e-sankey-nodes>
        @foreach (var node in nodeData)
        {
            <e-sankey-node id="@node.id"></e-sankey-node>
        }
    </e-sankey-nodes>
    <e-sankey-links>
        @foreach (var link in linkData)
        {
            <e-sankey-link sourceId="@link.sourceNodeID" targetId="@link.targetNodeID" value="@link.value"></e-sankey-link>
        }
    </e-sankey-links>
    <e-sankey-nodesettings padding=10
                           width="20">
    </e-sankey-nodesettings>
</ejs-sankey>

常见模式

模式 1：带流向可视化的彩色节点

创建一个桑基图，其中每个节点都有不同的颜色，连线则显示渐变混色效果：

<ejs-sankey id="coloredSankey" width="100%" height="420px">
    <e-sankey-links>
        @foreach (var link in linkData)
        {
            <e-sankey-link sourceId="@link.sourceNodeID" targetId="@link.targetNodeID" value="@link.value"></e-sankey-link>
        }
    </e-sankey-links>
    <e-sankey-nodes>
        @foreach (var node in nodeData)
        {
            <e-sankey-node id="@node.id"></e-sankey-node>
        }
    </e-sankey-nodes>
    <e-sankey-nodesettings fill="#3DB6E6"></e-sankey-nodesettings>
    <e-sankey-linksettings opacity="0.4" colorType="Blend"></e-sankey-linksettings>
</ejs-sankey>

模式 2：交互式响应式布局

构建一个可根据容器宽度自适应的桑基图：

<ejs-sankey id="responsiveSankey" width="100%" height="100%">
    <e-sankey-nodes>
        @foreach (var node in nodeData)
        {
            <e-sankey-node id="@node.id"></e-sankey-node>
        }
    </e-sankey-nodes>
    <e-sankey-links>
        @foreach (var link in linkData)
        {
            <e-sankey-link sourceId="@link.sourceNodeID" targetId="@link.targetNodeID" value="@link.value"></e-sankey-link>
        }
    </e-sankey-links>
    <e-sankey-nodesettings width="20" padding="10"></e-sankey-nodesettings>
</ejs-sankey>

模式 3：垂直流程

显示从上到下流动的流程：

<ejs-sankey id="verticalFlow"
                 orientation="Vertical"
                 width="100%" height="600px">
    <e-sankey-nodes>
        @foreach (var node in nodeData)
        {
            <e-sankey-node id="@node.id"></e-sankey-node>
        }
    </e-sankey-nodes>
    <e-sankey-links>
        @foreach (var link in linkData)
        {
            <e-sankey-link sourceId="@link.sourceNodeID" targetId="@link.targetNodeID" value="@link.value"></e-sankey-link>
        }
    </e-sankey-links>
</ejs-sankey>

主要属性

• 节点：表示实体（来源、目标、中间节点），外观可自定义
• 连线：连接节点，并通过基于数值的粗细表示流量大小
• NodeStyle：所有节点的全局样式（填充、描边、宽度、内边距、不透明度）
• LinkStyle：所有连线的全局样式（不透明度、曲率、颜色类型）
• LabelSettings：配置标签的外观、字体、可见性和位置
• LegendSettings：控制图例的显示、位置和交互行为
• Orientation：在水平和垂直流向之间切换
• EnableRtl：为国际化应用启用从右到左的布局

何时使用桑基图

✅ 最适合：

• 供应链和物流流向
• 能源分配系统
• 收入和利润流
• 客户旅程映射
• 数据管道可视化
• 流程转换
• 预算分配流向
• 网站流量分析

❌ 不适合：

• 对相互独立的数值进行简单比较
• 时间序列趋势分析
• 层级树结构
• 没有流向的网络图