Back to Details

syncfusion-react-sankey

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing Syncfusion React Sankey Chart

实现Syncfusion React Sankey Chart

When to Use This Skill

何时使用此技能

Use this skill when you need to:
  • Display energy flows or process dependencies
  • Visualize hierarchical relationships and data movement between categories
  • Create interactive node-link diagrams with custom styling
  • Build responsive flow visualizations with legends and tooltips
  • Enable user interactions like clicks and hover effects
  • Export or print flow diagrams
  • Support accessibility features and RTL layouts
当你需要以下功能时使用此技能：
  • 展示能量流或流程依赖关系
  • 可视化类别间的层级关系和数据流转
  • 创建带有自定义样式的交互式节点链接图
  • 构建带有图例和工具提示的响应式流可视化图表
  • 启用点击和悬停等用户交互效果
  • 导出或打印流图
  • 支持无障碍功能和RTL布局

Component Overview

组件概述

The Syncfusion React Sankey Chart component visualizes flow data through interconnected nodes and links, perfect for displaying energy consumption, data flows, process hierarchies, and organizational relationships. It provides rich customization options for appearance, interactivity, and accessibility.
Key Features:
  • Node & Link Configuration - Define data sources and destinations with custom styling
  • Labels & Positioning - Control text display, node positioning, and title/subtitle
  • Legend Support - Display legend with customizable positioning and styling
  • Interactivity - Tooltips, click events, and user interactions
  • Appearance Customization - Colors, opacity, link curvature, and theming
  • RTL Support - Right-to-left layout for international applications
  • Accessibility - WCAG compliance and screen reader support
  • Export Capabilities - Export diagrams and print functionality
Syncfusion React Sankey Chart组件通过相互连接的节点和链接可视化流数据，非常适合展示能源消耗、数据流、流程层级和组织关系。它提供了丰富的外观、交互性和无障碍访问自定义选项。
核心功能：
  • 节点与链接配置 - 定义数据源和目标并自定义样式
  • 标签与定位 - 控制文本显示、节点定位以及标题/副标题
  • 图例支持 - 显示可自定义位置和样式的图例
  • 交互性 - 工具提示、点击事件和用户交互
  • 外观自定义 - 颜色、透明度、链接曲率和主题设置
  • RTL支持 - 为国际化应用提供从右到左的布局
  • 无障碍访问 - 符合WCAG标准并支持屏幕阅读器
  • 导出功能 - 导出图表和打印功能

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md
  • Installation and package setup
  • Dependencies and module injection
  • Basic Sankey component creation
  • Development environment setup
  • Running your first example
📄 阅读： references/getting-started.md
  • 安装和包配置
  • 依赖项和模块注入
  • 创建基础Sankey组件
  • 开发环境设置
  • 运行你的第一个示例

Nodes and Links Configuration

节点与链接配置

📄 Read: references/nodes-and-links.md
  • Node structure and properties
  • Link structure and data flow
  • Data binding and source/target relationships
  • Node positioning with offset property
  • Link styling and customization
  • Performance optimization for large datasets
📄 阅读： references/nodes-and-links.md
  • 节点结构和属性
  • 链接结构和数据流
  • 数据绑定以及源/目标关系
  • 使用offset属性定位节点
  • 链接样式和自定义
  • 大数据集的性能优化

Labels and Positioning

标签与定位

📄 Read: references/labels-and-positioning.md
  • Label visibility and configuration
  • Node label positioning and alignment
  • Title and subtitle settings
  • Text formatting and styling options
  • Handling label overflow scenarios
📄 阅读： references/labels-and-positioning.md
  • 标签可见性和配置
  • 节点标签定位和对齐
  • 标题和副标题设置
  • 文本格式化和样式选项
  • 处理标签溢出场景

Legend and Display Options

图例与显示选项

📄 Read: references/legend-and-display.md
  • Legend configuration and visibility
  • Legend positioning (Top, Bottom, Left, Right)
  • Display options and item padding
  • Visual styling and theming
  • Color customization
📄 阅读： references/legend-and-display.md
  • 图例配置和可见性
  • 图例定位（顶部、底部、左侧、右侧）
  • 显示选项和项间距
  • 视觉样式和主题
  • 颜色自定义

Interactivity and Events

交互性与事件

📄 Read: references/interactivity.md
  • Tooltip configuration and display
  • Event handling (nodeClick, linkClick, load events)
  • User interaction patterns
  • Enabling/disabling interactive features
  • Event callbacks and data access
📄 阅读： references/interactivity.md
  • 工具提示配置和显示
  • 事件处理（nodeClick、linkClick、load事件）
  • 用户交互模式
  • 启用/禁用交互功能
  • 事件回调和数据访问

Appearance and Styling

外观与样式

📄 Read: references/appearance-and-styling.md
  • Link styling (opacity, curvature, colorType)
  • Node appearance customization
  • Color schemes and theming
  • CSS integration and custom styling
  • Responsive design considerations
📄 阅读： references/appearance-and-styling.md
  • 链接样式（透明度、曲率、colorType）
  • 节点外观自定义
  • 配色方案和主题
  • CSS集成和自定义样式
  • 响应式设计考量

Accessibility and Orientation

无障碍访问与布局方向

📄 Read: references/accessibility-and-orientation.md
  • RTL (Right-to-Left) layout support
  • WCAG accessibility compliance
  • Keyboard navigation support
  • Screen reader compatibility
  • Device responsiveness
📄 阅读： references/accessibility-and-orientation.md
  • RTL（从右到左）布局支持
  • 符合WCAG无障碍标准
  • 键盘导航支持
  • 屏幕阅读器兼容性
  • 设备响应性

Export and Print Features

导出与打印功能

📄 Read: references/export-and-print.md
  • Export functionality and image formats
  • Print capabilities
  • Exporting diagram data
  • Configuration options
  • Common export scenarios
📄 阅读： references/export-and-print.md
  • 导出功能和图像格式
  • 打印功能
  • 导出图表数据
  • 配置选项
  • 常见导出场景

API Reference

API参考

📄 Read: references/sankey-props.md • references/sankey-events.md • references/sankey-methods.md • references/sankey-examples.md
  • Machine-parsable API listings for component props, events, and methods
  • Verified defaults, types, and short descriptions mapped from Syncfusion React Sankey API
  • Implementation examples illustrating common patterns and method usage
📄 阅读： references/sankey-props.md • references/sankey-events.md • references/sankey-methods.md • references/sankey-examples.md
  • 机器可解析的组件属性、事件和方法API列表
  • 从Syncfusion React Sankey API映射的已验证默认值、类型和简短描述
  • 展示常见模式和方法用法的实现示例

Quick Start Example

快速入门示例

tsx
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"));
tsx
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"));

Common Patterns

常见模式

Pattern 1: Multi-Level Flow Visualization

模式1：多层流可视化

Create hierarchical flows with multiple source and destination nodes for complex data relationships.
tsx
<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>
创建带有多个源节点和目标节点的层级流，用于展示复杂的数据关系。
tsx
<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>

Pattern 2: Styled Links with Color Types

模式2：使用colorType自定义链接样式

Customize link appearance using colorType to inherit colors from source or apply custom styling.
tsx
<SankeyComponent
  linkStyle={{ 
    opacity: 0.6, 
    curvature: 0.55, 
    colorType: 'Source'
  }}
>
  {/* nodes and links */}
  <Inject services={[SankeyTooltip, SankeyLegend]} />
</SankeyComponent>
通过colorType自定义链接外观，可继承源节点颜色或应用自定义样式。
tsx
<SankeyComponent
  linkStyle={{ 
    opacity: 0.6, 
    curvature: 0.55, 
    colorType: 'Source'
  }}
>
  {/* nodes and links */}
  <Inject services={[SankeyTooltip, SankeyLegend]} />
</SankeyComponent>

Pattern 3: Responsive with Device Detection

模式3：基于设备检测的响应式设计

Adapt component dimensions and display based on device type for better UX.
tsx
import { Browser } from '@syncfusion/ej2-base';

<SankeyComponent
  height={Browser.isDevice ? '600px' : '450px'}
  labelSettings={{ visible: !Browser.isDevice }}
>
  {/* nodes and links */}
  <Inject services={[SankeyTooltip, SankeyLegend]} />
</SankeyComponent>
根据设备类型调整组件尺寸和显示效果，提升用户体验。
tsx
import { Browser } from '@syncfusion/ej2-base';

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

Key Props Reference

核心属性参考

PropTypePurpose
width
stringChart width (e.g., '90%', '800px')
height
stringChart height (e.g., '420px')
title
stringMain chart title
subTitle
stringChart subtitle
tooltip
objectTooltip configuration
legendSettings
objectLegend visibility and positioning
labelSettings
objectNode label configuration
linkStyle
objectLink styling (opacity, curvature, colorType)
属性（Prop）类型（Type）用途（Purpose）
width
string图表宽度（例如：'90%'、'800px'）
height
string图表高度（例如：'420px'）
title
string图表主标题
subTitle
string图表副标题
tooltip
object工具提示配置
legendSettings
object图例可见性和定位
labelSettings
object节点标签配置
linkStyle
object链接样式（透明度、曲率、colorType）

Common Use Cases

常见使用场景

  1. Energy Consumption Flow - Track energy from sources through generation, distribution, to consumption sectors
  2. Process Dependencies - Visualize workflow stages and data movement through processes
  3. Organizational Hierarchy - Display reporting structures and resource allocation
  4. Supply Chain Flow - Show product movement from suppliers through manufacturing to distribution
  5. Data Pipeline - Visualize data transformation and routing through system components
  1. 能源消耗流 - 追踪能源从源头经过发电、分配到消耗环节的流向
  2. 流程依赖关系 - 可视化工作流阶段和流程中的数据流转
  3. 组织层级 - 展示汇报结构和资源分配情况
  4. 供应链流 - 展示产品从供应商经过制造到分销的流转过程
  5. 数据管道 - 可视化数据在系统组件间的转换和路由