syncfusion-aspnetcore-sankey

Syncfusion Sankey チャートの実装

Syncfusion Sankey チャートは、カテゴリ間の重み付きの流れや関係を表示するための強力な可視化コンポーネントです。インタラクティブなノードでエンティティを表し、リンクで接続を示します。リンクの視覚的な太さは、フローの値に比例します。プロセスフロー、サプライチェーン、エネルギー分配など、フローの大きさを可視化する必要があるあらゆるシナリオに最適です。

ドキュメントとナビゲーションガイド

API リファレンス

📄 参照: references/api-reference.md

• Sankey チャートコンポーネントの完全な API ドキュメント
• コンストラクターとプロパティの定義
• イベントプロパティとコールバック
• 設定オプションと使用パターン
• 関連する設定クラスとデータ構造

はじめに

📄 参照: references/getting-started.md

• インストールとパッケージのセットアップ
• Sankey チャートの基本的な初期化
• CSS のインポートとテーマの設定
• ノードとリンクを使用したデータの追加
• 最初の動作するサンプル

ノードのカスタマイズとスタイル設定

📄 参照: references/nodes-customization.md

• ノードの外観を全体的に設定
• 個々のノードのスタイルの上書き
• ノードの幅、パディング、不透明度の制御
• オフセットプロパティを使用したノードの配置
• ホバー中のインタラクティブな不透明度
• ノードの動的なレンダリングイベント
• ノードへの色の適用

リンクのスタイル設定と構成

📄 参照: 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 チャートを 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>

主なプロパティ

• Nodes：カスタマイズ可能な外観で、エンティティ（ソース、ターゲット、中間要素）を表します
• Links：値に応じた太さでノードを接続し、フローの規模を表します
• NodeStyle：すべてのノードに適用する全体的なスタイル（塗りつぶし、線、幅、パディング、不透明度）
• LinkStyle：すべてのリンクに適用する全体的なスタイル（不透明度、曲率、colorType）
• LabelSettings：ラベルの外観、フォント、表示、配置を設定します
• LegendSettings：凡例の表示、位置、インタラクティブな動作を制御します
• Orientation：フローの方向を水平または垂直に切り替えます
• EnableRtl：国際的なアプリケーション向けに、右から左へのレイアウトを有効にします

サンキーチャートを使用する場面

✅ 最適な用途：

• サプライチェーンと物流のフロー
• エネルギー配分システム
• 収益と利益の流れ
• カスタマージャーニーのマッピング
• データパイプラインの可視化
• プロセスの変換
• 予算配分のフロー
• ウェブサイトのトラフィック分析

❌ 適さない用途：

• 独立した値の単純な比較
• 時系列の傾向分析
• 階層型のツリー構造
• フローの方向性がないネットワークグラフ