Графики
Легенда
Расшифровка цветов графика. Обязательна при двух и более рядах: без неё цвет не сообщает ничего, а график с бессмысленным цветом — это раскрашенная картинка.
- Рендер 18,2 с
- Физика 11,5 с
- Ассеты 8,1 с
- Аудио 4,2 с
Разметка
<ul class="inst-legend">
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-1)"></span>Рендер <span class="inst-legend-value">18,2 с</span></li>
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-2)"></span>Физика <span class="inst-legend-value">11,5 с</span></li>
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-3)"></span>Ассеты <span class="inst-legend-value">8,1 с</span></li>
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-4)"></span>Аудио <span class="inst-legend-value">4,2 с</span></li>
</ul>
Использование
Легенда — список. Ряды перечислимы, значит это <ul>: скринридер объявит
«список из четырёх элементов» до того, как начнёт их читать.
<ul class="inst-legend">
<li class="inst-legend-item">
<span class="inst-legend-swatch" style="--series:var(--chart-1)"></span>Рендер
<span class="inst-legend-value">18,2 с</span>
</li>
</ul>
| Что | Обязательно | Почему |
|---|---|---|
<ul> и <li> |
да | Ряды перечислимы. Список объявляет их количество до чтения |
--series на каждой метке |
да | Иначе все метки одного цвета — легенда без легенды |
| Порядок, совпадающий с графиком | да | Номер ряда — контракт, а не порядок сортировки |
| Величина или отличимая подпись | да | Цвет не имеет права быть единственным признаком ряда |
Когда использовать
| Используйте | Возьмите другое |
|---|---|
| Два и более рядов на одном графике — не опция, а обязанность | Один ряд — легенда не нужна: цвет ничего не различает. Подпишите метрику над спарклайном |
| Список рядов с их итоговыми величинами | Список пар «имя — значение» без графика — список свойств: квадратик ряда там сообщал бы о цвете, которого нет |
| Расшифровка категорий, различаемых цветом | Состояния из словаря кита — бейдж с точкой: статус не категория, и цвет у него закреплён |
| Пять-шесть рядов максимум | Седьмой ряд — это уже не график, а таблица. См. палитру |
Устройство
- Успешно
- С замечаниями
- Упало
Разметка
<ul class="inst-legend">
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-1)"></span>Успешно</li>
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-2)"></span>С замечаниями</li>
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-3)"></span>Упало</li>
</ul>
| Узел | Работа |
|---|---|
inst-legend |
<ul>. Маркеры и отступы списка сняты, элементы переносятся |
inst-legend-item |
<li>. Метка и подпись в одну строку |
inst-legend-swatch |
Метка ряда. Читает --series |
inst-legend-value |
Величина ряда. Полный цвет текста и средний вес |
Метка ряда — квадрат, а не круг: круг в этом ките занят точкой состояния, и круглая метка ряда прочиталась бы как статус.
Варианты
Цвет ряда назначается через --series инлайном — это канал данных: номер
ряда приходит вместе с данными и не может быть известен статическому CSS.
Оформление метки — размер, радиус, положение — целиком в ките.
- Ряд 1
- Ряд 2
- Ряд 3
- Ряд 4
Разметка
<ul class="inst-legend">
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-1)"></span>Ряд 1</li>
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-2)"></span>Ряд 2</li>
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-3)"></span>Ряд 3</li>
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-4)"></span>Ряд 4</li>
</ul>
Порядок — часть контракта: первый ряд всегда --chart-1, и порядок в
легенде обязан совпадать с порядком рядов на графике. Легенда,
отсортированная по величине, а график — по времени, дают две разные нумерации
одного и того же.
Если рядов один, --series не ставится вовсе: умолчание --chart-1
достаточно.
Композиции
С величинами
- Рендер 18,2 с
- Физика 11,5 с
Разметка
<ul class="inst-legend">
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-1)"></span>Рендер <span class="inst-legend-value">18,2 с</span></li>
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-2)"></span>Физика <span class="inst-legend-value">11,5 с</span></li>
</ul>
Величина в легенде — не украшение, а второй носитель: она даёт точное
число тому, кто не различает тона, и делает легенду читаемой отдельно от
графика. Именно поэтому inst-legend-value берёт полный цвет текста, а
подпись — приглушённый: сканируют числа.
Под графиком в карточке
- Рендер 18,2 с
- Физика 11,5 с
Разметка
<div class="inst-card inst-stack inst-stack--tight">
<div class="inst-card-title">Время по модулям</div>
<svg class="inst-sparkline" viewBox="0 0 120 32" preserveAspectRatio="none" aria-hidden="true">
<path class="inst-sparkline-line" d="M0,26 24,24 48,18 72,13 96,9 120,6"/>
</svg>
<ul class="inst-legend">
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-1)"></span>Рендер <span class="inst-legend-value">18,2 с</span></li>
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-2)"></span>Физика <span class="inst-legend-value">11,5 с</span></li>
</ul>
</div>
Легенда стоит под графиком: сверху она отодвигает данные ниже линии сгиба ради того, что читают вторым.
Правила
Так Легенда при двух рядах и больше
Без расшифровки цвет ничего не сообщает, и назначать его было незачем.
Не так Легенда при одном ряде
Различать нечего: цвет ничего не кодирует. Подпишите метрику над графиком.
Так Порядок легенды = порядок графика
Ряд №1 всегда --chart-1. Легенда по величине при графике по времени даёт две
нумерации одного и того же.
Не так Ряды, различимые только тоном
Подпись словом и величина — второй носитель. Иначе легенда не работает ни при дальтонизме, ни на чёрно-белой печати.
Доступность
| Структура | <ul> — количество рядов объявляется до перечисления |
| Цвет не единственный носитель | У ряда есть подпись словом и, как правило, величина. Легенда, где ряды различимы только тоном метки, не работает ни при дальтонизме, ни на чёрно-белой печати |
| Контраст | Метка держит 3:1 против поверхности: это несущий знак, а не украшение. Подписи — 4.5:1 |
| Различимость рядов | Светлота внутри категориальной палитры разная намеренно: ряды остаются различимы, когда тон исчезает вовсе |
| Кегль | --text-xs — 12px. Метка размером --size-dot, то есть 6px: меньше делать нельзя, она перестанет читаться как цвет |
| Порядок чтения | Метка перед подписью: скринридер читает подпись, а не пустой узел, потому что метка не имеет текста и не объявляется |
API
| Имя | Значение | Что делает |
|---|---|---|
| класс | ||
inst-legend | — | Контейнер-список |
inst-legend-item | — | Элемент: метка плюс подпись |
inst-legend-swatch | — | Квадратная метка ряда |
inst-legend-value | — | Величина ряда |
| переменная | ||
--series | --chart-1 | Приёмник тона: образец легенды читает её |
| токен | ||
--chart-1 | light-dark(oklch(0.520 0.150 280), oklch(0.700 0.130 280)) | Тон ряда №1. Порядок — часть контракта |
--chart-2 | light-dark(oklch(0.600 0.150 320), oklch(0.760 0.120 320)) | Тон ряда №2. Порядок — часть контракта |
--chart-3 | light-dark(oklch(0.550 0.140 355), oklch(0.720 0.120 355)) | Тон ряда №3. Порядок — часть контракта |
--chart-4 | light-dark(oklch(0.650 0.120 55), oklch(0.800 0.110 55)) | Тон ряда №4. Порядок — часть контракта |
--chart-5 | light-dark(oklch(0.580 0.130 115), oklch(0.740 0.120 115)) | Тон ряда №5. Порядок — часть контракта |
--chart-6 | light-dark(oklch(0.620 0.110 190), oklch(0.780 0.100 190)) | Тон ряда №6. Порядок — часть контракта |
--size-dot | 6px | Сторона образца |
--radius-xs | 3px | Скругление образца |
--text-xs | 0.75rem | Кегль подписи |
--space-3 | 6px | Зазор между образцом и подписью |
--gap-inline | var(--space-4) | Зазор между пунктами |
--weight-medium | 500 | Начертание значения |
Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument