Диаграмма XY — это комплексный компонент визуализации данных, используемый для отображения как линейных, так и столбчатых диаграмм на стандартной двухмерной сетке координат. Введена для замены и объединения устаревших независимых схем диаграмм, xychart-beta движок отображения динамически обрабатывает пользовательские числовые наборы данных, автоматически масштабирует адаптивные структурные сетки и поддерживает одновременное отображение нескольких независимых перекрывающихся рядов данных.
Базовая структура синтаксиса
Каждая диаграмма XY начинается с xychart-beta заголовка объявления. За ним следует настройка массива категорий горизонтальной оси X, заголовка вертикальной оси Y или пределов диапазона данных, а также по крайней мере одного явного ряда данных для построения (например, блока line или bar блока).
xychart-beta
title "Пример диаграммы производительности"
x-axis [Янв, Фев, Мар, Апр]
y-axis "Выручка (USD)"
bar [4500, 5200, 6100, 5800]
Справочник по синтаксису
В таблице ниже приведены основные определения данных и ключи конфигурации, необходимые для правильной структуризации диаграммы XY в Mermaid.js.
| Компонент синтаксиса | Принятые форматы | Описание и правила использования |
|---|---|---|
| Объявление | Ключевое слово | Инициализирует рабочую область диаграммы в двухмерной сетке. Должно использоваться точное xychart-beta строковое блокирование. |
| Заголовок | Строка в кавычках | Необязательный глобальный заголовок, отображаемый по центру непосредственно над сеткой холста диаграммы. |
| Настройка оси X | Список в скобках / диапазон | Определяет метки горизонтальной шкалы. Принимает категориальные текстовые строки в скобках[A, B, C] или числовые диапазоны точек [100 --> 500]. |
| Конфигурация оси Y | Строка заголовка / границы шкалы | Настраивает параметры вертикальной шкалы. Может быть просто строкой заголовка оси, или настраиваемой для ограничения нижних/верхних диапазонов значений с помощью"Заголовок" 0 --> 100. |
| Серия построения столбцов | Числовой массив | Отображает наборы данных в виде вертикальных столбцов. Количество элементов в массиве данных должно точно соответствовать длине категории оси X. |
| Серия построения линий | Числовой массив | Отображает наборы данных в виде непрерывных линий, соединяющих точки данных по рабочей области сетки. |
Расширенная настройка данных (прямые указания)
Вы можете точно настроить внешний вид рабочей области диаграммы, вставив блок конфигурации frontmatter в самое начало фрагмента кода документа. Это дает вам полный контроль над макетом: пользовательские цвета в шестнадцатеричном формате, толщина линий серий графиков и видимость полей сетки.
Матрица атрибутов конфигурации диаграммы XY
| Ключ конфигурации свойства | Варианты значений | Визуальный результат |
|---|---|---|
showLine |
true | false |
Переключает отображение линий сетки основной структурной оси на координатах. |
chartWidth |
Целое число (пиксели) | Задает фиксированную ширину границы холста макета системы сетки. |
chartHeight |
Целое число (пиксели) | Задает фиксированную высоту границы холста макета системы сетки. |
themeVariables.xyChart |
Массивы сопоставления цветов | Вставляет явные блоки цветов в шестнадцатеричном формате (например, backgroundColor, titleColor, или пользовательские слоты списка цветов plotColorPalette) в ваши графики. |
Реальный чертеж: многополосное техническое сравнение
Этот всесторонний чертеж отслеживает анализ производительности инфраструктуры. Он использует пользовательский директивный элемент конфигурации для фиксации размеров холста, отображения линий сетки на фоне и вставки явного палитры цветов в шестнадцатеричном формате. Он отображает четыре различных квартальных этапа, отображая их в виде комбинированной визуальной комбинированной диаграммы (наложенные серии столбцов и серии линий, объединённые вместе).
---
config:
xychart:
chartWidth: 700
chartHeight: 400
showLine: true
themeVariables:
xychart:
titleColor: "#0072B1"
plotColorPalette: "#0072B1, #E06000"
---
xychart-beta
title "Q1-Q4 Ресурсы против метрик выполнения"
x-axis ["Квартал 1", "Квартал 2", "Квартал 3", "Квартал 4"]
y-axis "Единицы метрик производительности" 0 --> 100
bar [45, 65, 80, 95]
line [55, 60, 72, 88]
Совет по синтаксису: При наложении нескольких графиков данных (например, при запуске набора данных bar и набора данных line внутри одного и того же холста макета), рендеринг-движок будет стекать или рисовать их последовательно в том порядке, в котором они написаны в текстовом скрипте. Располагайте свои блоки данных намеренно, чтобы избежать визуального обрезания на линиях холста.
Распространённые ошибки синтаксиса и ограничения системы
При компиляции путей размерной матрицы несколько тонких ошибок в конфигурации могут нарушить расчёты координат. Помните об этих параметрах устранения неполадок:
- Несоответствие длины данных: Каждый отдельный
barилилиниямассив данных *должен* содержать точно такое же количество элементов, какое определено в вашемось Xпараметр списка. Наличие 4 категорий на оси X, но предоставление списка данных из 5 чисел полностью сломает компиляцию диаграммы. - Границы кавычек: При указании категорий внутри квадратных скобок списка оси текстовые блоки, содержащие пробелы или специальные знаки препинания, должны быть чисто заключены в двойные кавычки (например,
["Фаза 1", "Фаза 2"]). - Числовые границы координат: При установке ручных диапазонов на шкале оси (например,
0 --> 500), вы должны явно использовать два дефиса, за которыми следует символ больше (-->). Пропуск дефиса или разделение символов оператора пробелами вызовет ошибку обработки макета. - Положительные целые веса: Значения шкалы отображаются на блоках линейного пространства. Убедитесь, что значения, передаваемые вашей серии, не содержат непроэкранированных символьных элементов или пустых параметров null внутри массивов.