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 を参照してください。