相対的なカテゴリ割当を提示する際、ドーナツチャート従来の実心の円グラフに対する現代的で高コントラストな代替手段を提供します。中心部を削除することで、ドーナツチャートは塗りつぶされた領域の大きさから外側のリングに沿った弧の長さへ視覚的な注目を移します。この空洞の中心部は、主要なパフォーマンス指標、集計合計、ステータスインジケーターなどのための最適な視覚的領域を創出します。そのため、経営陣のステータスダッシュボードや財務概要において欠かせない存在となっています。
ドーナツチャートの仕組み
Apache EChartsでは、ドーナツチャートは'pie'というシリーズタイプと、2要素のradius配列を組み合わせて設定します：['innerRadius', 'outerRadius']最初の値は空洞の中心部の開口を定義し、2番目の値は外側の境界を制御します。
1. 必須の設定
標準的なドーナツチャートを構築するには、type: 'pie'を設定し、radius: ['50%', '70%']、そしてnameとvalueプロパティを持つデータオブジェクトを渡します：nameおよびvalueプロパティ：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '予算配分',
type: 'pie',
radius: ['50%', '70%'],
center: ['50%', '55%'],
avoidLabelOverlap: true,
label: {
show: false
},
data: [
{ value: 1048, name: 'エンジニアリング' },
{ value: 735, name: 'マーケティング' },
{ value: 580, name: 'オペレーション' },
{ value: 484, name: 'セールス' },
{ value: 300, name: 'サポート' }
]
}
]
};
高度な構造技術
ドーナツチャートは、中心の統計情報や丸みを帯びた視覚的スタイルと組み合わせることで、洗練されたUIコンポーネントを構築するのに優れています。
1. 中心ラベル統計情報のオーバーレイ
ドーナツリング内に直接、総計や主要なKPIを表示するために、グラフィック要素や中央に配置されたタイトルコンポーネントを利用します：
ECharts
Edit ECharts in VPasCode
option = {
title: {
text: '$3,147',
subtext: '合計支出',
left: 'center',
top: '42%',
textStyle: {
fontSize: 28,
fontWeight: 'bold',
color: '#333'
},
subtextStyle: {
fontSize: 14,
color: '#666'
}
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '支出',
type: 'pie',
radius: ['60%', '80%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
label: {
show: false
},
data: [
{ value: 1048, name: 'ハードウェア' },
{ value: 735, name: 'SaaSサブスクリプション' },
{ value: 580, name: '事務用品' },
{ value: 484, name: '旅行' }
]
}
]
};
レイアウトとセグメントスタイルの微調整
わずかな角のラウンドと明確なセグメント間隔を加えることで、ドーナツチャートは洗練された現代的な外観になります。
1. 角のラウンドとセグメント間隔
次を使用してitemStyle.borderRadius明確な白色の境界線と併用して、各弧セグメントに柔らかく、カプセルのような外観を与える：
ECharts
Edit ECharts in VPasCode
option = {
series: [
{
name: 'ストレージ使用状況',
type: 'pie',
radius: ['45%', '70%'],
itemStyle: {
borderRadius: 10,
borderColor: '#ffffff',
borderWidth: 4
},
label: {
show: true,
formatter: '{b}: {d}%'
},
data: [
{ value: 40, name: '文書' },
{ value: 25, name: 'メディアファイル' },
{ value: 20, name: 'システムデータ' },
{ value: 15, name: '空き領域' }
]
}
]
};
戦略的なベストプラクティス
- 内径と外径の比率を最適化する：セグメントが容易にホバーできるほど十分に太く、かつ中心部に十分なスペースを確保するため、内径を外径の50%～70%の範囲に保つ。
- 中心部の空間を意図的に活用する：チャートの周囲に余分なテキストボックスを配置してごちゃごちゃにする代わりに、中央の空洞部に総計や選択されたセグメントの指標を表示する。
- セグメント数を制限する：リングを5～6つの主要なセグメントに限定する。多数の小さなカテゴリがある場合は、「その他」カテゴリに統合して、細すぎて読みづらい弧を防ぐ。