syncfusion-aspnetcore-sankey

用途

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

主要能力

节点（Nodes）：表示实体（源、目标、中间节点），外观可自定义。
连线（Links）：连接节点，粗细基于数值表示流量大小。
节点样式（NodeStyle）：所有节点的全局样式（fill、stroke、width、padding、opacity）。
连线样式（LinkStyle）：所有连线的全局样式（opacity、curvature、colorType）。
标签设置（LabelSettings）：配置标签外观、字体、可见性和位置。
图例设置（LegendSettings）：控制图例显示、位置和交互行为。
方向（Orientation）：在水平和垂直流向之间切换。
EnableRtl：为国际化应用启用从右到左布局。

文档导航

技能提供以下参考文档：

API Reference（references/api-reference.md）：Sankey Chart 组件的完整 API 文档，包括构造函数与属性定义、事件属性与回调、配置选项与使用模式、相关设置类与数据结构。
Getting Started（references/getting-started.md）：安装与包设置、基础 Sankey Chart 初始化、CSS 导入与主题配置、添加带节点和连线的数据、首个可运行示例。
Node Customization and Styling（references/nodes-customization.md）：全局节点外观配置、单个节点样式覆盖、节点宽度/内边距/不透明度控制、使用 offset 属性定位节点、悬停时的交互式不透明度、动态节点渲染事件、节点颜色应用。
Link Styling and Configuration（references/links-styling.md）：连线外观与不透明度属性、连线路径曲率控制、连线颜色类型（Source、Target、Blend）、连线值与粗细映射、通过渲染事件动态自定义连线、交互期间的不透明度控制、创建有意义的流量大小视觉表示。
Labels and Legend Configuration（references/labels-legend.md）：标签可见性与字体样式、全局标签设置（大小、颜色、粗细）、单个节点标签自定义、动态标签渲染与修改、图例位置与显示选项、图例自定义（背景、不透明度、形状）、交互式图例高亮、动态图例项渲染。
Appearance and Theming（references/appearance-theming.md）：宽度与高度配置、使用百分比实现响应式尺寸、背景与边框自定义、外边距配置、内置主题选择、配色方案与视觉样式、使图表跨设备响应式。
Events and Interactions（references/events-interactions.md）：生命周期事件（Load、Loaded）、节点与连线交互事件（click、enter、leave）、用于自定义的渲染事件、标签与图例渲染事件、尺寸变化事件处理、导出与打印事件、完整事件处理模式。
Orientation and RTL Support（references/orientation-rtl.md）：水平与垂直方向选项、从右到左（RTL）布局支持、不同方向下的 RTL、国际化应用的布局镜像、本地化最佳实践。
Print and Export（references/print-export.md）：将 Sankey Chart 打印为 PDF 或纸张、导出为 PNG/JPEG/SVG/PDF 格式、自定义文件名与格式选择、导出前后事件处理、基于用例的格式选择、文件大小与质量考量。
Accessibility（references/accessibility.md）：WCAG 2.2 与 Section 508 合规、屏幕阅读器支持与 ARIA 属性、键盘导航快捷键、颜色对比度与移动端无障碍、WAI-ARIA 角色与属性、确保包容性可视化。

使用方式

基础 Sankey Chart 示例（ASP.NET Core）：

@{
    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：交互式响应式布局。构建适应容器宽度的响应式 Sankey：

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

适用场景

适合：

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

不适合：

独立值的简单比较
时间序列趋势分析
层级树结构
无流向的网络图

限制

资料未提供关于收费、价格、平台支持范围、性能上限或具体版本要求的信息，暂未提供。

技能介绍

用途

主要能力

文档导航

使用方式

适用场景

限制