相互に接続されたネットワーク、構造的階層、または複雑なエンティティの関係をマッピングする際、グラフチャート（またはネットワークグラフ）は、理想的な視覚的フレームワークです。アイテムをノードとして、接続を有向または無向のリンクとして表示することで、グラフチャートはユーザーがクラスタ、依存関係ツリー、関係性のフローを標準の表形式チャートでは伝えられない—マイクロサービスアーキテクチャ、ソーシャルネットワークの相互作用、または知識グラフなど。
グラフチャートのメカニズム
Apache EChartsでは、グラフチャートはtype: 'graph'を使用します。数値を水平軸および垂直軸の座標に直接マッピングするのではなく、グラフチャートは明示的なノード（またはdata）とlinks（またはedges）を扱います。EChartsは、これらのノードを固定座標配置、円形レイアウト、または動的な力に基づく物理エンジンを使用して配置します。
1. 必須の設定
力に基づく物理エンジンを使用して基本的なネットワークグラフを構築するには、ノードをdata内に宣言し、接続をlinks内にマッピングし、layout: 'force':
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {},
legend: {
data: ['サービス', 'データベース']
},
series: [
{
name: 'システムネットワーク',
type: 'graph',
layout: 'force',
roam: true, // ズームとパンを許可
label: {
show: true,
position: 'right'
},
force: {
repulsion: 100,
edgeLength: 80
},
data: [
{ id: '0', name: 'APIゲートウェイ', symbolSize: 30, category: 0 },
{ id: '1', name: '認証サービス', symbolSize: 20, category: 0 },
{ id: '2', name: '注文サービス', symbolSize: 20, category: 0 },
{ id: '3', name: 'ユーザーDB', symbolSize: 25, category: 1 },
{ id: '4', name: '注文DB', symbolSize: 25, category: 1 }
],
links: [
{ source: '0', target: '1' },
{ source: '0', target: '2' },
{ source: '1', target: '3' },
{ source: '2', target: '4' }
],
categories: [
{ name: 'サービス' },
{ name: 'データベース' }
]
}
]
};
高度な構造技術
グラフチャートは、円環配置や方向性のある矢印など、データの依存関係を明確に表示するための代替レイアウトエンジンをサポートしています。
1. 方向性リンク矢印付きの円形レイアウト
設定：layout: 'circular'ノードを明確なリング構造に整理し、エッジの矢印を有効にしてコンポーネント間の方向性の関係を表示します：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {},
series: [
{
type: 'graph',
layout: 'circular',
roam: true,
label: {
show: true,
position: 'outside'
},
edgeSymbol: ['none', 'arrow'], // リンクの終端に矢印を描画
edgeSymbolSize: [0, 8],
data: [
{ id: 'A', name: 'ノードA', symbolSize: 24 },
{ id: 'B', name: 'ノードB', symbolSize: 24 },
{ id: 'C', name: 'ノードC', symbolSize: 24 },
{ id: 'D', name: 'ノードD', symbolSize: 24 },
{ id: 'E', name: 'ノードE', symbolSize: 24 }
],
links: [
{ source: 'A', target: 'B' },
{ source: 'B', target: 'C' },
{ source: 'C', target: 'D' },
{ source: 'D', target: 'E' },
{ source: 'E', target: 'A' },
{ source: 'A', target: 'C' }
],
lineStyle: {
color: '#5470c6',
width: 2,
curveness: 0.2 // 重複を避けるため接続線を曲げる
}
}
]
};
レイアウトとノードスタイルの微調整
エッジのカーブ、ノードの境界影、インタラクションオプションを調整することで、インタラクティブなウェブページ上の密集したネットワーククラスタを読みやすく保つことができます。
1. カスタムノードカテゴリカラーとフォースフィジックス
反発値とラインスタイルを調整して、構造的で視覚的に分離されたクラスタを作成します：
ECharts
Edit ECharts in VPasCode
option = {
legend: {
top: '5%',
left: 'center'
},
series: [
{
type: 'graph',
layout: 'force',
roam: true,
draggable: true,
force: {
repulsion: 250,
gravity: 0.1,
edgeLength: [50, 100]
},
categories: [
{ name: 'フロントエンド', itemStyle: { color: '#5470c6' } },
{ name: 'バックエンド', itemStyle: { color: '#91cc75' } },
{ name: 'インフラストラクチャ', itemStyle: { color: '#fac858' } }
],
data: [
{ name: 'Webアプリ', category: 0, symbolSize: 32 },
{ name: 'モバイルアプリ', category: 0, symbolSize: 28 },
{ name: 'APIゲートウェイ', category: 1, symbolSize: 26 },
{ name: 'マイクロサービスA', category: 1, symbolSize: 22 },
{ name: 'マイクロサービスB', category: 1, symbolSize: 22 },
{ name: 'Redisキャッシュ', category: 2, symbolSize: 20 },
{ name: 'PostgreSQL', category: 2, symbolSize: 24 }
],
links: [
{ source: 'Webアプリ', target: 'APIゲートウェイ' },
{ source: 'モバイルアプリ', target: 'APIゲートウェイ' },
{ source: 'APIゲートウェイ', target: 'マイクロサービスA' },
{ source: 'APIゲートウェイ', target: 'マイクロサービスB' },
{ source: 'マイクロサービスA', target: 'Redisキャッシュ' },
{ source: 'マイクロサービスB', target: 'PostgreSQL' }
],
lineStyle: {
color: 'source', // ソースノードの色に基づいてエッジの色を設定
width: 2,
curveness: 0.1
}
}
]
};
戦略的なベストプラクティス
- 有効化：
roam: trueナビゲーション用に：インタラクティブなネットワークは急速に拡大します。ズームとパンナビゲーションを有効にすることで、ユーザーは特定のクラスタに集中でき、窮屈な感覚を避けられます。 - 適用：
curvenessエッジに適用：わずかなカーブを設定する（例：lineStyle.curveness: 0.1から0.2) 同じノード同士の双方向リンクが重なって1本の線になるのを防ぎます。 - バランスフォース物理反発力： 調整
force.repulsion注意して調整してください。値が低すぎるとノードが重なり密集したクラスターになりますが、値が高すぎるとノードが完全に表示領域から外れてしまいます。