複数レベルの階層データセットを提示する場合や、スペースが限られている状況で大規模な視覚的分解を表示する場合、ツリーマップチャートは効率的な視覚的ソリューションを提供します。ネストされた長方形を統一された境界領域にタイル配置することで、ツリーマップは長方形の面積サイズを通じて数値をエンコードし、ユーザーが複雑なネスト構造における相対的な比率を評価できるようにします。複雑なネスト構造における相対的な比率—例えばディスク容量の使用状況、製品カタログの売上、親部門と子部門間の予算配分など。
ツリーマップチャートの仕組み
Apache EChartsでは、ツリーマップはtype: 'treemap'を使用します。シリーズはツリー構造のdata配列を想定しており、各オブジェクトにはname、数値的なvalue、およびオプションのchildren配列が、より深いネストレベル用にあります。
1. 必須の設定
基本的なツリーマップを構築するには、ネストされたchildrenを含む階層データ配列を定義し、シリーズ構成内でtype: 'treemap'を設定します：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
formatter: '{b}: ${c}'
},
series: [
{
type: 'treemap',
data: [
{
name: '電子機器',
value: 400,
children: [
{ name: '携帯電話', value: 240 },
{ name: 'ノートパソコン', value: 160 }
]
},
{
name: '衣料品',
value: 300,
children: [
{ name: 'シャツ', value: 180 },
{ name: '靴', value: 120 }
]
}
]
}
]
};
高度な構造技術
ツリーマップは、複数レベルのスタイルルール、色のグラデーションマッピング、および深いデータツリー用のインタラクティブなドリルダウンコントロールを設定できます。
1. マルチレベルのパンくずナビゲーションによるドリルダウン
トップの凡例とパンくずナビゲーションを有効にして、ユーザーがトップレベルのカテゴリを識別し、ネストされたサブディレクトリにスムーズに移動できるようにします：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} GB'
},
legend: {
top: '5%',
left: 'center',
data: ['システムドライブ (C:)', 'データドライブ (D:)']
},
series: [
{
type: 'treemap',
top: '18%',
bottom: '12%',
leafDepth: 1, // クリックでドリルダウンするように1レベルずつ表示
breadcrumb: {
show: true,
left: 'center',
bottom: '2%'
},
levels: [
{
itemStyle: {
borderColor: '#555',
borderWidth: 2,
gapWidth: 2
}
},
{
colorSaturation: [0.3, 0.6],
itemStyle: {
borderWidth: 1,
gapWidth: 1,
borderColorSaturation: 0.7
}
}
],
data: [
{
name: 'システムドライブ (C:)',
value: 500,
children: [
{ name: 'Windows', value: 120 },
{ name: 'Program Files', value: 230 },
{ name: 'Users', value: 150 }
]
},
{
name: 'データドライブ (D:)',
value: 800,
children: [
{ name: 'Media', value: 450 },
{ name: 'Backups', value: 250 },
{ name: 'Projects', value: 100 }
]
}
]
}
]
};
レイアウトとスタイルの微調整
ギャップ幅の適用、クリーンな境界線、明確なレベルカラーを使用することで、ネストされた長方形が整理され、視覚的に読みやすくなります。
1. カスタムセル境界線とラベルの配置
調整する gapWidth および label親コンテナと子セグメントの間に明確な境界を維持するため、設定を調整します：
ECharts
Edit ECharts in VPasCode
option = {
series: [
{
type: 'treemap',
roam: false, // 手動のズーム/パンを無効化
label: {
show: true,
formatter: '{b}n{c}'
},
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2,
gapWidth: 2
},
data: [
{
name: '北米',
value: 520,
itemStyle: { color: '#5470c6' }
},
{
name: 'ヨーロッパ',
value: 380,
itemStyle: { color: '#91cc75' }
},
{
name: 'アジア太平洋',
value: 450,
itemStyle: { color: '#fac858' }
},
{
name: 'ラテンアメリカ',
value: 190,
itemStyle: { color: '#ee6666' }
}
]
}
]
};
戦略的なベストプラクティス
- 使用する
gapWidthネストの可視性のために：小さなgapWidthネストされた長方形の間に小さな（例：2px～4px）gapWidthを設定すると、親カテゴリと子サブアイテムの間に明確な間隔が生まれます。 - 深い階層構造の場合、パンくずを有効にする：3つ以上のネストレベルを表示する際は、`breadcrumb: { show: true }` を有効にして、ユーザーが自分の位置を簡単に把握し、上位に移動できるようにします。
- ラベルは簡潔に保つ：テキストは小さなリーフ長方形に簡単にはみ出てしまいます。短い名前をツールチップと組み合わせるか、または
leafDepthズームインするまで、小さなサブ長方形を非表示にする。