連続的な転送、リソースの分配、または複数段階のユーザー体験を追跡する際、サンキー図は、最も優れた可視化ツールです。連続する段階のノードの間に比例した流れの帯を描くことで、サンキー図は総量が複雑なシステム内でどのように分割され、結合され、移行するかを示します—ウェブサイトのユーザー変換ファネル、エネルギー分配グリッド、または組織の予算配分などです。
サンキー図のメカニズム
Apache EChartsでは、サンキー図はtype: 'sankey'を使用します。グラフ図と同様に、サンキー図は一意のノード（またはdata）と、方向性のあるlinks（またはエッジ）で構成されます。各リンクにはsourceノード名、targetノード名、および数値型のvalueが、接続される流れの線の視覚的な幅を決定します。
1. 必須の設定
基本的なサンキー図を構築するには、ノード項目をdata内に宣言し、links:
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
data: [
{ name: '売上合計' },
{ name: '製品販売' },
{ name: 'サービス' },
{ name: 'マーケティング' },
{ name: '研究開発' },
{ name: '利益' }
],
links: [
{ source: '売上合計', target: '製品販売', value: 70 },
{ source: '売上合計', target: 'サービス', value: 30 },
{ source: '製品販売', target: 'マーケティング', value: 30 },
{ source: '製品販売', target: '研究開発', value: 25 },
{ source: '製品販売', target: '利益', value: 15 },
{ source: 'サービス', target: '利益', value: 30 }
],
emphasis: {
focus: 'adjacency'
},
lineStyle: {
color: 'gradient',
curveness: 0.5
}
}
]
};
高度な構造技術
サニーキーチャートは、垂直方向のフロー配置、複数レベルのノードカラー、および動的なリンク強調機能を活用して、複雑なネットワークを通過する個々の経路を追跡できます。
1. 垂直フロー方向
設定：orient: 'vertical'水平方向のステージフローを上から下への垂直ウォーターフォールビューに変換します：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
orient: 'vertical',
nodeWidth: 20,
nodeGap: 16,
data: [
{ name: 'ウェブサイト訪問数' },
{ name: '製品ページ' },
{ name: '直接離脱' },
{ name: 'カート' },
{ name: 'チェックアウト' }
],
links: [
{ source: 'ウェブサイト訪問数', target: '製品ページ', value: 1000 },
{ source: 'ウェブサイト訪問数', target: '直接離脱', value: 400 },
{ source: '製品ページ', target: 'カート', value: 600 },
{ source: 'カート', target: 'チェックアウト', value: 450 }
],
lineStyle: {
color: 'source',
curveness: 0.5
}
}
]
};
レイアウトとリンクスタイルの微調整
ノード間隔、線のカーブ、ホバー時のハイライト動作を調整することで、複雑なマルチステージフローを明確で読みやすく保つことができます。
1. ノードギャップ制御とソース・ターゲットのグラデーションフロー
カスタマイズ：nodeGapおよび設定：lineStyle.color: 'gradient'各ステージ間でスムーズな色のグラデーションを実現します：
ECharts
Edit ECharts in VPasCode
option = {
series: [
{
type: 'sankey',
left: '5%',
right: '15%',
nodeWidth: 24,
nodeGap: 18,
draggable: true,
label: {
position: 'right',
color: '#333',
fontSize: 12
},
data: [
{ name: 'ソースA', itemStyle: { color: '#5470c6' } },
{ name: 'ソースB', itemStyle: { color: '#91cc75' } },
{ name: 'ステージ1', itemStyle: { color: '#fac858' } },
{ name: 'ステージ2', itemStyle: { color: '#ee6666' } },
{ name: '最終出力', itemStyle: { color: '#73c0de' } }
],
links: [
{ source: 'ソースA', target: 'ステージ1', value: 50 },
{ source: 'ソースB', target: 'ステージ1', value: 30 },
{ source: 'ステージ1', target: 'ステージ2', value: 60 },
{ source: 'ステージ1', target: '最終出力', value: 20 },
{ source: 'ステージ2', target: '最終出力', value: 60 }
],
lineStyle: {
color: 'gradient',
curveness: 0.6,
opacity: 0.4
}
}
]
};
戦略的なベストプラクティス
- フローの保存を維持する：ノードに入力される値の合計が、出力される値と等しく、または論理的に説明できるようにし、誤解を招く視覚的なギャップを防ぎます。
- 有効化：
強調.フォーカス: '隣接性':複数段階のフローを扱う場合、ホバー時に隣接するリンクに焦点を当てることで、ユーザーは視覚的なノイズを伴わずに特定の経路を明確にできる。 - グラデーションリンクを使用する: 設定
lineStyle.color: 'グラデーション'滑らかにソースノードの色をターゲットノードの色に溶け込ませ、複数段階の遷移を視覚的に直感的にする。