内側のリングが高レベルのカテゴリを表し、外側のリングがサブカテゴリに分解されるようなマルチティアの階層を提示する際、サンバーストチャートは、ツリーマップの明確でラジアルな代替手段を提供します。ネストされたカテゴリを同心円状に配置することで、サンバーストチャートはユーザーがマルチレベルの構造的割合、親子関係、および配布経路をコンパクトな空間内（たとえば、グローバル製品カテゴリ、組織図、または複数ステップのユーザー離脱経路など）で探索できるようにします。
サンバーストチャートのメカニズム
Apache EChartsでは、サンバーストチャートはtype: 'sunburst'を使用します。ツリーマップと同様に、シリーズはdata配列にネストされたツリー構造を期待しており、親オブジェクトにはchildren配列が含まれます。エンジンはルートノードまたは最上位のカテゴリを最も内側の円に描画し、サブカテゴリを同心円状のレイヤーに沿って外側に展開します。
1. 必須のセットアップ
基本的なサンバーストチャートを構築するには、ネストされたツリー形式のデータセットを提供し、type: 'sunburst'シリーズオブジェクト内に設定します：
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
series: [
{
type: 'sunburst',
data: [
{
name: '祖父',
children: [
{
name: '親1',
value: 15,
children: [
{ name: '子1', value: 5 },
{ name: '子2', value: 10 }
]
},
{
name: '親2',
value: 10,
children: [
{ name: '子3', value: 10 }
]
}
]
}
],
radius: [0, '90%'],
label: {
rotate: 'radial'
}
}
]
};
高度な構造技術
サンバーストチャートは、リングレベルのスタイルルール、色の継承、クリックによるズームによるインタラクティブなドリルダウン機能でカスタマイズ可能です。
1. レベル別リングカスタマイズとドリルダウン
次のlevels配列を使用して、中心から外側に向かって各同心円レイヤーに対して異なる半径、ラベルの振る舞い、アイテムスタイルを定義します：
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '2%',
left: 'center',
data: ['電子機器', 'ホーム＆ライフ']
},
series: [
{
type: 'sunburst',
center: ['50%', '55%'],
radius: ['10%', '85%'],
nodeClick: 'rootToNode', // ノードをクリックするとドリルダウンが有効
levels: [
{},
{
// 内側のリング（最上位カテゴリ）
r0: '15%',
r: '40%',
label: { rotate: 0, fontWeight: 'bold' },
itemStyle: { borderWidth: 2 }
},
{
// 中間のリング（サブカテゴリ）
r0: '40%',
r: '65%',
label: { rotate: 'tangential', fontSize: 11 }
},
{
// 外側のリング（葉の製品）
r0: '65%',
r: '85%',
label: { rotate: 'radial', fontSize: 10 }
}
],
data: [
{
name: '電子機器',
children: [
{
name: 'オーディオ',
children: [
{ name: 'ヘッドフォン', value: 40 },
{ name: 'スピーカー', value: 25 }
]
},
{
name: 'コンピュータ',
children: [
{ name: 'ノートパソコン', value: 80 },
{ name: 'デスクトップ', value: 35 }
]
}
]
},
{
name: 'ホーム＆ライフ',
children: [
{
name: '家具',
children: [
{ name: '椅子', value: 50 },
{ name: 'テーブル', value: 30 }
]
},
{
name: '装飾品',
children: [
{ name: '照明', value: 45 },
{ name: 'ラグ', value: 20 }
]
}
]
}
]
}
]
};
レイアウトとラベルの配置を微調整する
ラベルの回転モードを制御する（径方向 対比して 接線方向）は、セクターが外側のリングに近づくにつれて狭くなる際も、テキストが読みやすく保たれるようにする。
1. カスタムセクター間隔と径方向ラベル
アイテムの境界線を適用し、rotate: 'radial'を設定して、テキストをセクターの半径に沿ってすっきりと整列させる：
option = {
series: [
{
type: 'sunburst',
radius: ['20%', '90%'],
itemStyle: {
borderRadius: 4,
borderColor: '#ffffff',
borderWidth: 2
},
label: {
show: true,
rotate: 'radial',
align: 'right'
},
data: [
{
name: 'ソフトウェア',
itemStyle: { color: '#5470c6' },
children: [
{ name: 'SaaS', value: 120 },
{ name: 'オンプレミス', value: 60 }
]
},
{
name: 'ハードウェア',
itemStyle: { color: '#91cc75' },
children: [
{ name: 'サーバー', value: 90 },
{ name: 'ネットワーキング', value: 110 }
]
},
{
name: 'サービス',
itemStyle: { color: '#fac858' },
children: [
{ name: 'コンサルティング', value: 70 },
{ name: 'サポート', value: 50 }
]
}
]
}
]
};
戦略的なベストプラクティス
- ラベルの回転をリングの深さに合わせる： 水平方向（
rotate: 0）または接線方向のラベルを広い内側のリングに使用し、狭い外側のセクターでは径方向ラベルに切り替える。 - 有効にする：
nodeClick: 'rootToNode':インタラクティブなズームにより、ユーザーは任意の親弧をクリックして、視覚的なごちゃごちゃを避けながら、そのサブツリーに直接注目できる。 - 色の継承を使用する：子セクターが親ノードの基本色を明度・彩度を変化させながら継承できるようにすることで、レベル間で明確な視覚的グループ化を維持する。