XY-диаграмма
XY-диаграмма — это комплексный модуль диаграмм, использующий ось x и ось y для представления данных
Пример
Копировать
Встраивание
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
Синтаксис
Все текстовые значения, состоящие только из одного слова, можно записывать без двойных кавычек. Если текстовое значение содержит несколько слов, особенно если в нём есть пробелы, его нужно заключать в двойные кавычки.
Направление
Диаграмму можно рисовать горизонтально или вертикально; по умолчанию — вертикально.
Копировать
Встраивание
xychart-beta horizontal
...
Заголовок
Заголовок — это краткое описание диаграммы; он всегда рендерится в верхней части диаграммы.
Пример
Копировать
Встраивание
xychart-beta
title "This is a simple example"
...
Ось x
Ось x в основном представляет категориальные значения, хотя её также можно использовать как числовой диапазон.
Пример
- mermaid.grammar_quadrant_example_x_axis_min_max_use
- mermaid.grammar_quadrant_example_x_axis_title_text
Ось y
Ось y используется для представления числового диапазона; она не может иметь категориальных значений.
Пример
- y-axis title min --> max
- Она добавляет только заголовок, а диапазон генерируется автоматически на основе данных
Линейная диаграмма
Линейная диаграмма предоставляет возможность графического отображения линий.
Пример
- mermaid.grammar_quadrant_example_line_2_3_valide
- mermaid.grammar_quadrant_example_line_series_2_3_valide
Столбчатая диаграмма
Столбчатая диаграмма позволяет графически отображать столбцы.
Пример
- mermaid.grammar_quadrant_example_bar_2_3_valide
- mermaid.grammar_quadrant_example_bar_series_2_3_valide
Простой пример
Единственные два необходимых элемента — это имя диаграммы xychart и один набор данных. Таким образом, вы сможете построить диаграмму с помощью простой конфигурации.
Копировать
Встраивание
xychart-beta
line [+1.3, .6, 2.4, -.34]
Конфигурация диаграммы
| Параметр | Описание | Значение по умолчанию |
|---|---|---|
| width | Ширина диаграммы | 700 |
| height | Высота диаграммы | 500 |
| titlePadding | Верхний и нижний внутренние отступы заголовка | 10 |
| titleFontSize | Размер шрифта заголовка | 20 |
| showTitle | Отображать ли заголовок | true |
| xAxis | Конфигурация оси x | AxisConfig |
| yAxis | Конфигурация оси y | AxisConfig |
| plotReservedSpacePercent | Минимальный процент пространства, занимаемого каждым графиком на диаграмме | 50 |
| showDataLabel | Отображать ли соответствующее значение внутри столбца | false |
AxisConfig
| Параметр | Описание | Значение по умолчанию |
|---|---|---|
| showLabel | Отображать ли метки оси или значения делений | true |
| labelFontSize | Размер шрифта отрисовываемой метки | 14 |
| labelPadding | Верхний и нижний отступ метки | 5 |
| showTitle | Отображать ли заголовок оси | true |
| titleFontSize | Размер шрифта заголовка оси | 16 |
| titlePadding | Верхний и нижний отступ заголовка оси | 5 |
| showTick | Отображать ли деления | true |
| tickLength | Длина деления | 5 |
| tickWidth | Ширина деления | 2 |
| showAxisLine | Отображать ли линию оси | true |
| axisLineWidth | Толщина линии оси | 2 |
Переменные темы диаграммы
Тема xychart находится в свойстве xychart и может быть настроена с помощью следующего синтаксиса:
Копировать
Встраивание
---
config:
themeVariables:
xyChart:
titleColor: '#ff0000'
---
| Параметр | Описание |
|---|---|
| backgroundColor | Цвет фона всей диаграммы |
| titleColor | Цвет текста заголовка |
| xAxisLabelColor | Цвет метки оси x |
| xAxisTitleColor | Цвет заголовка оси x |
| xAxisTickColor | Цвет делений оси x |
| xAxisLineColor | Цвет линии оси x |
| yAxisLabelColor | Цвет метки оси y |
| yAxisTitleColor | Цвет заголовка оси y |
| yAxisTickColor | Цвет делений оси y |
| yAxisLineColor | Цвет линии оси y |
| plotColorPalette | Можно настроить с помощью следующего синтаксиса, например "#f3456, #43445" |
Пример конфигурации и темы
Копировать
Встраивание
---
config:
xyChart:
width: 900
height: 600
showDataLabel: true
themeVariables:
xyChart:
titleColor: "#f96"
---
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
