Диаграмма Найтингейл: пропорции полярной розы и радиальные циклы

При представлении циклических данных или визуально выразительных категориальных пропорций, Диаграмма Найтингейл (также известная как диаграмма полярной розы или диаграмма коксомба) предлагает убедительную визуальную структуру. Созданная Флоренс Найтингейл для визуализации данных общественного здравоохранения, эта диаграмма кодирует значения данных с помощью длины радиуса сектора, а не угла. Сохраняя углы срезов одинаковыми, при этом увеличивая длину секторов наружу, диаграммы Найтингейл превращают циклические или категориальные метрики в яркие, эффектные радиальные конструкции.

Механика диаграмм Найтингейл

В Apache ECharts диаграмма Найтингейл использует стандартный 'pie' тип серии, настроенный с помощью roseType свойства. Установка roseType: 'radius' указывает движку делить круг на равные угловые сегменты, при этом размер внешнего радиуса каждого сектора определяется его числовым значением.

1. Основная настройка

Чтобы создать базовую диаграмму Найтингейл, установите roseType: 'radius' внутри 'pie' объекта серии и предоставьте свой набор данных:

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' сохраняет равные углы секторов во всех категориях, при этом масштабируется площадь среза, а не только радиус:

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и белые контурные границы, чтобы чётко отделить соседние радиальные лепестки:

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]), чтобы маленькие секторы не сжимались до непонятной острой точки в самом центре.
• Размещайте легенды не в центре: Размещайте легенды на верхнем или нижнем краю, чтобы предотвратить наложение текста на радиальные лепестки при их расширении наружу.