親子関係が明確な構造化データを提示する場合——組織図、ファイルシステムのディレクトリ、意思決定木、分類学的分類など——ツリー図直感的な視覚的フレームワークを提供します。データノードを分岐するパスに沿って配置することで、ツリー図はユーザーがネストされた階層を探索し、中心のルートノードからサブブランチにかけての接続を追跡できるようにします。
ツリー図の仕組み
Apache EChartsでは、ツリー図はtype: 'tree'を使用します。明確なX軸とY軸を持つ標準的なチャートとは異なり、ツリー図はネストされたJavaScriptオブジェクトからレイアウト位置を自動的に構築します。そのオブジェクトにはnameとオプションのchildren配列が含まれます。
1. 必須の設定
基本的なツリー図を構築するには、ネストされたデータ構造を定義し、シリーズ配列内にtype: 'tree'を設定します：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
data: [{
name: 'CEO',
children: [
{
name: '製品担当バイスプレジデント',
children: [
{ name: 'プロダクトマネージャー' },
{ name: 'UXデザイナー' }
]
},
{
name: 'エンジニアリング担当バイスプレジデント',
children: [
{ name: 'テックリード' },
{ name: 'DevOpsエンジニア' }
]
}
]
}],
top: '5%',
left: '15%',
bottom: '5%',
right: '20%',
symbolSize: 10,
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 12
},
leaves: {
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
},
expandAndCollapse: true,
animationDurationUpdate: 750
}
]
};
高度なレイアウト方向
ツリー図は、レイアウト方向を変更するか、円形表示に切り替えることで、異なるスペース制約やデザイン要件に適応できます。
1. 円形ツリー図レイアウト
設定してlayout: 'radial'中心点から分岐を外側に投影するように設定し、多くのリーフノードを持つ広い階層に適しています：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
layout: 'radial',
data: [{
name: 'ルート',
children: [
{
name: 'ブランチA',
children: [
{ name: 'A1' },
{ name: 'A2' },
{ name: 'A3' }
]
},
{
name: 'ブランチB',
children: [
{ name: 'B1' },
{ name: 'B2' }
]
},
{
name: 'ブランチC',
children: [
{ name: 'C1' },
{ name: 'C2' },
{ name: 'C3' },
{ name: 'C4' }
]
}
]
}],
top: '18%',
bottom: '14%',
right: '18%',
left: '18%',
symbolSize: 12,
initialTreeDepth: 2,
animationDurationUpdate: 750
}
]
};
レイアウトとスタイルの微調整
ノード記号、線のカーブ、レベルごとのフォーマットをカスタマイズすることで、大きな図のなかで重要な構造階層を強調できます。
1. カーブした接続線とレベルベースのノードスタイル
次を使用してlineStyle.curveness接続線を滑らかにし、levels配列構成を定義して、階層におけるノードの深さに応じてスタイルを設定します：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item'
},
series: [
{
type: 'tree',
orient: 'TB', // 上から下への方向
data: [{
name: 'プロジェクトルート',
children: [
{
name: 'フロントエンド',
children: [
{ name: 'React' },
{ name: 'Vue' }
]
},
{
name: 'バックエンド',
children: [
{ name: 'Node.js' },
{ name: 'Python' }
]
}
]
}],
top: '10%',
left: '10%',
bottom: '10%',
right: '10%',
symbol: 'emptyCircle',
symbolSize: 14,
edgeShape: 'polyline', // カーブではなく明確な矩形接続を使用
initialTreeDepth: 2,
lineStyle: {
width: 2,
color: '#ccc'
},
label: {
position: 'top',
fontSize: 12
},
leaves: {
label: {
position: 'bottom'
}
}
}
]
};
戦略的なベストプラクティス
- 初期折りたたみ深度を制御する：設定して
initialTreeDepth（例：1または2）を大規模なデータセットに設定することで、初期ロード時にチャートを整理した状態に保ちつつ、ユーザーがノードをクリックして詳細を展開できるようにします。 - 適切な方向を選択する：長いラベルテキストを含む深いネスト構造には水平方向（`LR`）またはラジアル（`radial`）レイアウトを使用し、浅く広い組織構造には垂直方向（`TB`）レイアウトを使用してください。
- リーフノードを区別する：次を使用して
leaves末端ノードを親コンテナノードとは異なるスタイルで表示するため、ユーザーが枝分かれと終端を簡単に区別できるようにします。