В библиотеке Nivo круговые диаграммы реализуются через компонент PieChart и его производные, включая вариант Donut. Центральным параметром, определяющим переход от классической круговой диаграммы к кольцевой, выступает внутренний радиус (innerRadius).
Классическая круговая диаграмма заполняет всю площадь круга от центра до внешней окружности. При введении внутреннего радиуса формируется пустая центральная область, а визуальная структура данных превращается в кольцо. Это изменение влияет не только на внешний вид, но и на восприятие данных, плотность информации и возможность размещения дополнительного контента внутри диаграммы.
Параметр innerRadius задаётся как число в диапазоне от 0
до 1 и определяет отношение внутреннего радиуса к внешнему.
innerRadius: 0 — классическая круговая диаграммаinnerRadius: 0.5 — половина радиуса остаётся пустой,
формируется толстое кольцоinnerRadius: 0.8 — тонкое кольцо с выраженным
центральным пространствомinnerRadius: 0.9 — минимальная толщина сегментовВнутренний радиус влияет на геометрию каждого сегмента: вместо сектора круга используется трапециевидная форма, ограниченная двумя окружностями.
Пусть внешний радиус равен ( R ), тогда внутренний радиус определяется как:
r = kR
где:
Площадь кольцевого сегмента определяется разностью площадей двух окружностей:
S = R^2 - r^2
При увеличении значения innerRadius площадь активной визуализации уменьшается, но плотность визуального восприятия возрастает, так как данные концентрируются ближе к внешнему краю.
В библиотеке Nivo кольцевая диаграмма реализуется через компонент
ResponsivePie. Основное отличие от обычной Pie Chart
заключается в передаче параметра innerRadius.
import { ResponsivePie } from '@nivo/pie'
const data = [
{ id: 'JavaScript', value: 45 },
{ id: 'Python', value: 25 },
{ id: 'Java', value: 15 },
{ id: 'C#', value: 10 },
{ id: 'Go', value: 5 }
]
const DonutChart = () => (
<ResponsivePie
data={data}
margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
innerRadius={0.6}
padAngle={1}
cornerRadius={2}
activeOuterRadiusOffset={8}
borderWidth={1}
borderColor={{ from: 'color', modifiers: [['darker', 0.2]] }}
enableArcLinkLabels={true}
arcLinkLabelsSkipAngle={10}
arcLinkLabelsTextColor="#333333"
arcLabelsSkipAngle={10}
arcLabelsTextColor="#ffffff"
/>
)При изменении innerRadius меняется форма каждого
сегмента:
С точки зрения восприятия данных кольцевая форма снижает визуальную конкуренцию между сегментами, так как центр перестаёт быть точкой фокусировки.
Пустое пространство в центре Donut Chart используется как функциональная зона интерфейса. В Nivo это реализуется через наложение дополнительных элементов поверх SVG-контейнера.
const CenteredMetric = ({ dataWithArc }) => {
let total = dataWithArc.reduce((acc, datum) => acc + datum.value, 0)
return (
<div style={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
textAlign: 'center'
}}>
<div style={{ fontSize: 24, fontWeight: 'bold' }}>
{total}
</div>
<div style={{ fontSize: 12, color: '#888' }}>
Total
</div>
</div>
)
}Такой подход позволяет использовать Donut Chart как комбинированный визуальный элемент: график + индикатор состояния.
В Nivo встроена система анимаций, которая реагирует на изменение данных и параметров компонента. При увеличении innerRadius изменяется траектория анимации:
Анимация основана на параметрическом описании дуги:
x = r (),y = r ()
При изменении внутреннего радиуса изменяется диапазон значений ( r ), что влияет на форму интерполяции.
Кольцевая форма изменяет визуальную иерархию:
При больших наборах данных (более 6–8 категорий) кольцевая диаграмма часто оказывается более читаемой, чем классическая круговая, за счёт увеличения свободного пространства внутри и уменьшения визуальной перегруженности центра.
Толщина кольца определяется разницей между внешним и внутренним
радиусом. В Nivo внешний радиус фиксируется контейнером, а внутренний
регулируется параметром innerRadius.
Практические значения:
Чем тоньше кольцо, тем выше визуальная зависимость от цветовой дифференциации.
Эффект кольцевой диаграммы усиливается при использовании дополнительных параметров:
padAngle — добавляет промежутки между сегментамиcornerRadius — скругляет края сегментов<ResponsivePie
data={data}
innerRadius={0.65}
padAngle={2}
cornerRadius={4}
/>При сочетании этих параметров сегменты перестают восприниматься как плотная структура и начинают визуально отделяться друг от друга, что повышает читаемость при большом количестве категорий.
Каждая кольцевая диаграмма в Nivo строится как набор SVG-слоёв:
InnerRadius влияет только на слой arcs, но косвенно изменяет позиционирование всех внешних элементов, так как изменяется геометрия базовой окружности.
При наведении на сегмент используется параметр
activeOuterRadiusOffset. Он увеличивает внешний радиус
активного сегмента, сохраняя внутренний неизменным.
Это создаёт эффект «выталкивания» сегмента из кольца, усиливая визуальную обратную связь. Геометрически это выглядит как увеличение углового сектора без изменения центрального отверстия.
Кольцевая диаграмма с заданным innerRadius часто используется в интерфейсах, где требуется:
При этом классическая круговая диаграмма применяется преимущественно для статических отчётов, тогда как Donut Chart становится частью интерактивных систем визуализации.
При значениях innerRadius выше 0.8 возникают особенности восприятия:
Для компенсации используются:
Компонент ResponsivePie автоматически пересчитывает геометрию при изменении размеров контейнера. InnerRadius при этом остаётся относительным коэффициентом, что позволяет сохранять пропорции кольца на разных разрешениях экрана.
В адаптивных интерфейсах это свойство обеспечивает стабильность визуальной структуры без необходимости пересчёта абсолютных значений радиуса.