周期的なデータや視覚的に印象的なカテゴリの比率を提示する際、ナイティングヘール図（別名：極座標ローズ図またはコックスコンブ図）は、説得力のある視覚的構造を提供します。フローレンス・ナイティングヘールが公衆衛生データを可視化するために考案したこの図は、セクターの角度幅ではなく、セクターの半径長さを使ってデータ値を表現します。スライスの角度を一定に保ちながらセクターの長さを外側に延長することで、ナイティングヘール図は周期的またはカテゴリの指標を明確でインパクトのある放射状デザインに変換します。
ナイティングヘール図の仕組み
Apache EChartsでは、ナイティングヘール図は標準の'pie'シリーズタイプで、roseTypeプロパティを設定します。roseType: 'radius'これにより、エンジンは円を等しい角度のセグメントに分割し、各セクターの外側半径をその数値に基づいて調整します。
1. 必須の設定
基本的なナイティングヘール図を構築するには、roseType: 'radius'を'pie'シリーズオブジェクト内に設定し、データセットを提供してください：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '半径モード',
type: 'pie',
radius: [20, 140],
center: ['50%', '55%'],
roseType: 'radius',
itemStyle: {
borderRadius: 5
},
data: [
{ value: 40, name: 'ローズ1' },
{ value: 38, name: 'ローズ2' },
{ value: 32, name: 'ローズ3' },
{ value: 30, name: 'ローズ4' },
{ value: 28, name: 'ローズ5' },
{ value: 26, name: 'ローズ6' },
{ value: 22, name: 'ローズ7' },
{ value: 18, name: 'ローズ8' }
]
}
]
};
高度な構造技術
ローズ図の表示モードをカスタマイズして、角度と半径の両方を同時に変化させたり、中心部を空洞化してローズ・ドーナツのハイブリッド形式にすることもできます。
1. 面積ローズタイプ（等角度対スケーリング角度）
設定するとroseType: 'area'すべてのカテゴリでセクターの角度を等しく保ちつつ、半径だけでなくスライスの面積をスケーリングします：
ECharts
Edit ECharts in VPasCode
option = {
legend: {
top: 'bottom'
},
series: [
{
name: '面積モード',
type: 'pie',
radius: [30, 120],
center: ['50%', '45%'],
roseType: 'area',
data: [
{ value: 30, name: 'マーケティング' },
{ value: 28, name: '営業' },
{ value: 26, name: '開発' },
{ value: 24, name: 'サポート' },
{ value: 22, name: 'デザイン' },
{ value: 20, name: '運用' }
]
}
]
};
レイアウトとスタイルの微調整
丸みを帯びた外側の先端と明確な境界線を適用することで、極座標ローズチャートは現代のウェブページ上で洗練された外観を手に入れます。
1. 丸みを帯びたローズの先端とセグメントの境界線
次を使用してborderRadius隣接する放射状の花びらを明確に分離するために、白いアウトライン境界線と併用する：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item'
},
series: [
{
name: '部門の影響',
type: 'pie',
radius: [40, 150],
center: ['50%', '50%'],
roseType: 'radius',
itemStyle: {
borderRadius: 8,
borderColor: '#ffffff',
borderWidth: 2
},
label: {
show: true,
formatter: '{b}: {c}'
},
data: [
{ value: 1048, name: 'エンジニアリング' },
{ value: 735, name: 'プロダクト' },
{ value: 580, name: 'マーケティング' },
{ value: 484, name: '営業' },
{ value: 300, name: 'サポート' }
]
}
]
};
戦略的なベストプラクティス
- 視覚的な歪みに注意する： 面積は半径に指数関数的に比例するため、ローズチャートでは標準的な棒グラフよりも大きな値が視覚的に優位に見えます。影響力と視覚的なインパクトを優先する場合に使用してください。
- 内側の半径の穴を空ける： 常に内側の半径（例：
[20, 140]）を設定して、小さなセクターが絶対的な中心部で読み取り不可能な鋭い点にまで縮小しないようにしてください。 - 凡例を中央からずらして配置する： 放射状の花びらが外側に伸びる際にテキストと重複しないように、凡例を上部または下部の端に配置してください。