syncfusion-react-sankey

实现 Syncfusion React Sankey 图表

何时使用此技能

在以下情况下使用此技能：

• 显示能源流或流程依赖关系
• 可视化层级关系以及类别间的数据流动
• 创建具有自定义样式的交互式节点链接图
• 构建带有图例和工具提示的响应式流向可视化图
• 启用点击和悬停效果等用户交互
• 导出或打印流向图
• 支持无障碍功能和 RTL 布局

组件概览

Syncfusion React Sankey 图表组件通过相互连接的节点和链接可视化流数据，非常适合展示能源消耗、数据流、流程层级和组织关系。它提供丰富的自定义选项，可用于调整外观、交互性和无障碍功能。

主要功能：

• 节点和链接配置 - 使用自定义样式定义数据源和目标
• 标签和定位 - 控制文本显示、节点定位以及标题和副标题
• 图例支持 - 显示图例，并自定义其位置和样式
• 交互性 - 工具提示、点击事件和用户交互
• 外观自定义 - 颜色、不透明度、链接曲度和主题
• RTL 支持 - 为国际化应用提供从右到左的布局
• 无障碍功能 - 符合 WCAG 标准并支持屏幕阅读器
• 导出功能 - 导出图表并提供打印功能

文档和导航指南

开始使用

📄 阅读： references/getting-started.md

• 安装和软件包设置
• 依赖项和模块注入
• 创建基本 Sankey 组件
• 开发环境设置
• 运行第一个示例

节点和链接配置

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

• 节点结构和属性
• 链接结构和数据流
• 数据绑定以及源和目标关系
• 使用 offset 属性定位节点
• 链接样式和自定义
• 针对大型数据集的性能优化

标签和定位

📄 阅读： references/labels-and-positioning.md

• 标签可见性和配置
• 节点标签定位和对齐
• 标题和副标题设置
• 文本格式和样式选项
• 处理标签溢出情况

图例和显示选项

📄 阅读： references/legend-and-display.md

• 图例配置和可见性
• 图例位置（Top、Bottom、Left、Right）
• 显示选项和项间距
• 视觉样式和主题
• 颜色自定义

交互性和事件

📄 阅读： references/interactivity.md

• 工具提示配置和显示
• 事件处理（nodeClick、linkClick、load 事件）
• 用户交互模式
• 启用或禁用交互功能
• 事件回调和数据访问

外观和样式

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

• 链接样式（opacity、curvature、colorType）
• 节点外观自定义
• 配色方案和主题
• CSS 集成和自定义样式
• 响应式设计注意事项

无障碍功能和方向

📄 阅读： references/accessibility-and-orientation.md

• RTL（从右到左）布局支持
• 符合 WCAG 无障碍标准
• 键盘导航支持
• 屏幕阅读器兼容性
• 设备响应能力

导出和打印功能

📄 阅读： references/export-and-print.md

• 导出功能和图像格式
• 打印功能
• 导出图表数据
• 配置选项
• 常见导出场景

API 参考

📄 阅读： references/sankey-props.md • references/sankey-events.md • references/sankey-methods.md • references/sankey-examples.md

• 可供机器解析的组件属性、事件和方法列表
• 根据 Syncfusion React Sankey API 映射并验证的默认值、类型和简短说明
• 展示常见模式和方法用法的实现示例

快速入门示例

import React from 'react';
import {
  SankeyComponent, Inject, SankeyTooltip, SankeyLegend, SankeyExport,
  SankeyNodeDirective,
  SankeyNodesCollectionDirective,
  SankeyLinkDirective,
  SankeyLinksCollectionDirective
} from '@syncfusion/ej2-react-charts';
import * as ReactDOM from "react-dom";

function BasicSankey() {
  return (
    <div className="control-pane">
      <div className="control-section">
        <SankeyComponent
          width="90%"
          height="420px"
          title="Energy Flow"
          tooltip={{ enable: true }}
          legendSettings={{ visible: true, position: 'Bottom' }}
        >
          <SankeyNodesCollectionDirective>
            <SankeyNodeDirective id="Solar" label={{ text: 'Solar' }} />
            <SankeyNodeDirective id="Generation" label={{ text: 'Generation' }} />
            <SankeyNodeDirective id="Consumption" label={{ text: 'Consumption' }} />
          </SankeyNodesCollectionDirective>
          <SankeyLinksCollectionDirective>
            <SankeyLinkDirective sourceId="Solar" targetId="Generation" value={450} />
            <SankeyLinkDirective sourceId="Generation" targetId="Consumption" value={400} />
          </SankeyLinksCollectionDirective>
          <Inject services={[SankeyTooltip, SankeyLegend, SankeyExport]} />
        </SankeyComponent>
      </div>
    </div>
  );
}

export default BasicSankey;
ReactDOM.render(<BasicSankey />, document.getElementById("charts"));

常见模式

模式 1：多层级流可视化

通过多个源节点和目标节点创建层级流，以呈现复杂的数据关系。

<SankeyComponent title="Process Flow">
  <SankeyNodesCollectionDirective>
    <SankeyNodeDirective id="Input" />
    <SankeyNodeDirective id="Processing" />
    <SankeyNodeDirective id="Output" />
  </SankeyNodesCollectionDirective>
  <SankeyLinksCollectionDirective>
    <SankeyLinkDirective sourceId="Input" targetId="Processing" value={100} />
    <SankeyLinkDirective sourceId="Processing" targetId="Output" value={80} />
  </SankeyLinksCollectionDirective>
  <Inject services={[SankeyTooltip, SankeyLegend]} />
</SankeyComponent>

模式 2：使用颜色类型设置链接样式

使用 colorType 自定义链接外观，使其继承源节点的颜色或应用自定义样式。

<SankeyComponent
  linkStyle={{ 
    opacity: 0.6, 
    curvature: 0.55, 
    colorType: 'Source'
  }}
>
  {/* nodes and links */}
  <Inject services={[SankeyTooltip, SankeyLegend]} />
</SankeyComponent>

模式 3：通过设备检测实现响应式布局

根据设备类型调整组件尺寸和显示方式，以提升用户体验。

import { Browser } from '@syncfusion/ej2-base';

<SankeyComponent
  height={Browser.isDevice ? '600px' : '450px'}
  labelSettings={{ visible: !Browser.isDevice }}
>
  {/* nodes and links */}
  <Inject services={[SankeyTooltip, SankeyLegend]} />
</SankeyComponent>

关键属性参考

属性	类型	用途
width	string	图表宽度（例如，'90%'、'800px'）
height	string	图表高度（例如，'420px'）
title	string	图表主标题
subTitle	string	图表副标题
tooltip	object	工具提示配置
legendSettings	object	图例的可见性和位置
labelSettings	object	节点标签配置
linkStyle	object	链接样式（透明度、曲率、colorType）

常见用例

1. 能源消耗流 - 跟踪能源从来源经过发电、配电到各消耗部门的流向
2. 流程依赖关系 - 可视化工作流阶段以及数据在流程中的流动
3. 组织层级结构 - 展示汇报关系和资源分配
4. 供应链流 - 展示产品从供应商经过制造到分销的流向
5. 数据管道 - 可视化数据在系统组件中的转换和路由

---