Для анализа разбиения компонентов по элементам с длинными названиями категорий, Гистограмма с накоплением является идеальным выбором. Структурируя сегменты данных горизонтально слева направо вдоль оси Y, эта визуализация сохраняет читаемость длинных меток, одновременно отображая общие итоги категорий и внутреннее пропорциональное разбиение. Она отлично подходит для анализа демографических результатов опросов, распределения ресурсов проектов по отделам или многоступенчатых конверсионных каналов.
Принципы работы горизонтальных гистограмм с накоплением
Создание горизонтальной гистограммы с накоплением предполагает использование того же stackсвойства, что и у вертикальных гистограмм с накоплением, в сочетании с осью Y, основанной на категориях. Когда несколько type: 'bar'серий имеют одинаковый stackключ на горизонтальной ориентации, движок отрисовки накапливает значения слева направо вдоль оси X.
1. Основная настройка
Чтобы создать базовую гистограмму с накоплением, установите yAxis на type: 'category', xAxis на type: 'value', и присвойте каждой серии совпадающую строку stackстроку:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['Инженерия', 'Продукт', 'Дизайн', 'Маркетинг']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Проект Альфа', 'Проект Бета', 'Проект Гамма', 'Проект Дельта']
},
series: [
{
name: 'Инженерия',
type: 'bar',
stack: 'allocation',
data: [320, 302, 301, 334]
},
{
name: 'Продукт',
type: 'bar',
stack: 'allocation',
data: [120, 132, 101, 134]
},
{
name: 'Дизайн',
type: 'bar',
stack: 'allocation',
data: [220, 182, 191, 234]
},
{
name: 'Маркетинг',
type: 'bar',
stack: 'allocation',
data: [150, 212, 201, 154]
}
]
};
Расширенные структурные приемы
Накопленные горизонтальные столбцы можно настроить для сравнения абсолютных объемов или нормализовать для отображения процентных соотношений между категориями.
1. Горизонтальная диаграмма с нормализацией до 100%
Чтобы оценить относительные соотношения, а не абсолютные значения по длинным категориям, нормализуйте данные рядов так, чтобы их сумма составляла 100% для каждой строки:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: '{b}rn{a0}: {c0}%rn{a1}: {c1}%rn{a2}: {c2}%'
},
legend: {
data: ['Удовлетворены', 'Нейтрально', 'Неудовлетворены']
},
xAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
yAxis: {
type: 'category',
data: [
'Успех корпоративных клиентов',
'Поддержка среднего бизнеса',
'Самостоятельная регистрация'
]
},
series: [
{
name: 'Удовлетворены',
type: 'bar',
stack: 'feedback',
data: [75, 60, 45]
},
{
name: 'Нейтрально',
type: 'bar',
stack: 'feedback',
data: [18, 25, 35]
},
{
name: 'Неудовлетворены',
type: 'bar',
stack: 'feedback',
data: [7, 15, 20]
}
]
};
Тонкая настройка макета и стилей
Четкие визуальные границы и закругленные внешние концы придают горизонтальным накопленным столбцам аккуратный, современный вид.
1. Разделение сегментов и закругление внешних концов
Примените тонкие вертикальные линии границ для разделения внутренних сегментов и ограничьте стиль закругления углов только последним сегментом справа:
option = {
grid: {
left: '15%',
right: '10%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Бюджет Q1', 'Бюджет Q2', 'Бюджет Q3', 'Бюджет Q4']
},
series: [
{
name: 'Фиксированные расходы',
type: 'bar',
stack: 'budget',
data: [400, 420, 410, 430],
itemStyle: {
color: '#5470c6',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Переменные расходы',
type: 'bar',
stack: 'budget',
data: [200, 250, 220, 280],
itemStyle: {
color: '#91cc75',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Расходы на усмотрение',
type: 'bar',
stack: 'budget',
data: [100, 150, 130, 190],
itemStyle: {
color: '#fac858',
borderColor: '#ffffff',
borderWidth: 1,
borderRadius: [0, 6, 6, 0] // Закругленные углы на правом концевом элементе
}
}
]
};
Стратегические лучшие практики
- Базовый сегмент первого уровня:Сегмент, ближайший к базовой линии оси Y, легче всего сравнивать между категориями. Всегда размещайте наиболее важный компонент в качестве первого объекта ряда.
- Ограничьте количество накопленных компонентов:Ограничьте общее количество накопленных сегментов до 5 или меньше на столбец, чтобы сохранить четкий визуальный анализ без перегрузки зрителя.
- Метки текста внутри столбца: Для горизонтальных накопленных столбцов с широкими сегментами рассмотрите возможность включения
label: { show: true, position: 'inside' }чтобы сделать значения отдельных сегментов читаемыми без необходимости использовать всплывающие подсказки при наведении.