Biểu đồ Nightingale: Tỷ lệ Hoa Hồng Cực và Chu kỳ Bán kính

Khi trình bày dữ liệu chu kỳ hoặc các tỷ lệ phân loại ấn tượng về mặt thị giác, thìBiểu đồ Nightingale (còn được gọi là Biểu đồ Hoa Hồng Cực hoặc Biểu đồ Coxcomb) cung cấp một cấu trúc thị giác hấp dẫn. Được Florence Nightingale tạo ra để biểu đồ hóa dữ liệu sức khỏe cộng đồng, biểu đồ này mã hóa các giá trị dữ liệu bằng độ dài bán kính của từng đoạn thay vì độ rộng góc. Bằng cách giữ nguyên góc của các đoạn giống nhau trong khi kéo dài độ dài các đoạn ra ngoài, biểu đồ Nightingale biến các chỉ số chu kỳ hoặc phân loại thành những thiết kế bán kính nổi bật và có tác động mạnh.

Cơ chế của Biểu đồ Nightingale

Trong Apache ECharts, biểu đồ Nightingale sử dụng kiểu chuỗi tiêu chuẩn'pie' kiểu chuỗi được cấu hình vớiroseType thuộc tính. ĐặtroseType: 'radius' sẽ hướng dẫn động cơ chia hình tròn thành các đoạn góc bằng nhau, đồng thời điều chỉnh độ dài bán kính ngoài của từng đoạn dựa trên giá trị số học của nó.

1. Cài đặt cơ bản

Để xây dựng một biểu đồ Nightingale cơ bản, hãy đặtroseType: 'radius' bên trong một'pie'đối tượng chuỗi và cung cấp bộ dữ liệu của bạn:

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} 
{b}: {c} ({d}%)'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: 'Chế độ Bán kính',
            type: 'pie',
            radius: [20, 140],
            center: ['50%', '55%'],
            roseType: 'radius',
            itemStyle: {
                borderRadius: 5
            },
            data: [
                { value: 40, name: 'Hoa 1' },
                { value: 38, name: 'Hoa 2' },
                { value: 32, name: 'Hoa 3' },
                { value: 30, name: 'Hoa 4' },
                { value: 28, name: 'Hoa 5' },
                { value: 26, name: 'Hoa 6' },
                { value: 22, name: 'Hoa 7' },
                { value: 18, name: 'Hoa 8' }
            ]
        }
    ]
};

Các kỹ thuật cấu trúc nâng cao

Bạn có thể tùy chỉnh chế độ hiển thị biểu đồ hoa hồng để thay đổi đồng thời cả góc và bán kính, hoặc làm rỗng phần trung tâm để tạo thành biểu đồ lai giữa hoa hồng và vành donut.

1. Loại Hoa Hồng Diện Tích (Góc bằng nhau so với Góc được tỉ lệ)

ĐặtroseType: 'area'giữ cho các góc đoạn bằng nhau ở tất cả các danh mục, đồng thời thay đổi diện tích đoạn thay vì chỉ bán kính:

option = {
    legend: {
        top: 'bottom'
    },
    series: [
        {
            name: 'Chế độ Diện tích',
            type: 'pie',
            radius: [30, 120],
            center: ['50%', '45%'],
            roseType: 'area',
            data: [
                { value: 30, name: 'Tiếp thị' },
                { value: 28, name: 'Bán hàng' },
                { value: 26, name: 'Phát triển' },
                { value: 24, name: 'Hỗ trợ' },
                { value: 22, name: 'Thiết kế' },
                { value: 20, name: 'Vận hành' }
            ]
        }
    ]
};

Tinh chỉnh bố cục và định dạng

Áp dụng các đầu ngoài tròn và viền rõ ràng giúp biểu đồ hoa hồng cực có vẻ ngoài tinh tế trên các trang web hiện đại.

1. Đầu hoa hồng tròn và viền các đoạn

Sử dụng borderRadiusvà viền viền ngoài màu trắng để tách biệt các cánh hoa cực kề nhau một cách rõ ràng:

option = {
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: 'Tác động theo Bộ phận',
            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: 'Kỹ thuật' },
                { value: 735, name: 'Sản phẩm' },
                { value: 580, name: 'Tiếp thị' },
                { value: 484, name: 'Bán hàng' },
                { value: 300, name: 'Hỗ trợ' }
            ]
        }
    ]
};

Các thực hành tốt chiến lược

• Lưu ý về biến dạng thị giác: Vì diện tích thay đổi theo cấp số nhân với bán kính, các giá trị lớn sẽ xuất hiện chiếm ưu thế về mặt thị giác trên biểu đồ hoa hồng so với biểu đồ cột tiêu chuẩn. Sử dụng chúng khi tác động và sự thu hút thị giác được ưu tiên hàng đầu.
• Giữ một khoảng trống bán kính bên trong: Luôn thiết lập một bán kính bên trong (ví dụ như [20, 140]) để các đoạn nhỏ không bị thu nhỏ thành một điểm nhọn không thể đọc được ở chính giữa tuyệt đối.
• Đặt chú thích lệch tâm: Đặt chú thích ở mép trên hoặc mép dưới để ngăn các cánh hoa cực không bị chồng lấn lên văn bản khi chúng mở rộng ra ngoài.