夜莺圖表：極地玫瑰比例與徑向週期

當呈現週期性資料或視覺上引人注目的分類比例時，夜莺圖表（又稱為極地玫瑰圖或科克斯龐圖）提供了一種引人注目的視覺結構。由弗洛倫斯·南丁格爾創製，用於繪製公共衛生資料，此圖表使用扇區半徑長度而非角度跨度來編碼資料值。透過保持切片角度相同，同時將扇區長度向外延伸，夜莺圖表將週期性或分類指標轉化為獨特且高影響力的徑向設計。

夜莺圖表的機制

在 Apache ECharts 中，夜莺圖表使用標準的「pie」 系列類型，並透過設定roseType 屬性。設定roseType: 'radius' 指示引擎將圓形劃分為相等的角度區段，同時根據每個扇區的數值來調整其外半徑大小。

1. 基本設定

要建立基本的夜莺圖表，請在roseType: 'radius' 內部設定「pie」 系列物件中，並提供您的資料集：

ECharts


在 VPasCode 中編輯 ECharts
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' }
            ]
        }
    ]
};
Edit ECharts in VPasCode



在 VPasCode 中編輯 ECharts

 

進階結構技術

您可以自訂玫瑰圖的顯示模式，同時調整角度與半徑，或將中心挖空，以形成玫瑰-甜甜圈混合圖形。

1. 面積玫瑰類型（相等角度 vs. 比例角度）

設定roseType: 'area'會保持所有類別的扇區角度相等，同時按比例調整切片面積，而非僅僅調整半徑：

ECharts


在 VPasCode 中編輯 ECharts
ECharts Edit ECharts in VPasCode 
option = {
    legend: {
        top: '底端'
    },
    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: '營運' }
            ]
        }
    ]
};
Edit ECharts in VPasCode



在 VPasCode 中編輯 ECharts

 

微調佈局與樣式

在極座標玫瑰圖上應用圓滑的外緣尖端與明顯的邊框，可讓現代網頁上的圖表呈現出更精緻的外觀。

1. 圓滑的玫瑰尖端與扇形邊框

使用 borderRadius並搭配白色外框邊界，以乾淨地分隔相鄰的放射狀花瓣：

ECharts


在 VPasCode 中編輯 ECharts
ECharts Edit ECharts in VPasCode 
option = {
    tooltip: {
        trigger: '項目'
    },
    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: '支援' }
            ]
        }
    ]
};
Edit ECharts in VPasCode



在 VPasCode 中編輯 ECharts

 

戰略最佳實務

  • 注意視覺扭曲：由於面積會隨著半徑呈指數級擴張，因此在玫瑰圖中較大的數值會比標準長條圖更顯得視覺上佔優勢。當影響力與視覺吸引力為首要考量時，可使用此類圖表。
  • 保留內半徑空洞： 始終設定內半徑（例如，[20, 140]）以避免小扇形在絕對中心處縮成無法辨識的尖點。
  • 將圖例置於非中心位置： 將圖例放置於頂部或底部邊緣，以防止放射狀花瓣向外延伸時與文字重疊。
返回頂端