Diagram XY
Wykres XY to kompleksowy moduł diagramów, służący do reprezentacji danych za pomocą osi x i osi y
Przykład
Kopiuj
Osadź
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]
Składnia
Wszystkie wartości tekstowe zawierające tylko jedno słowo można zapisywać bez podwójnych cudzysłowów. Jeśli wartość tekstowa zawiera wiele słów, zwłaszcza spacje, należy ująć ją w podwójne cudzysłowy.
Kierunek
Diagram można rysować poziomo lub pionowo; domyślnie pionowo.
Kopiuj
Osadź
xychart-beta horizontal
...
Tytuł
Tytuł to krótki opis diagramu, który zawsze jest renderowany na górze diagramu.
Przykład
Kopiuj
Osadź
xychart-beta
title "This is a simple example"
...
Oś x
Oś x reprezentuje głównie wartości kategoryczne, chociaż może być również używana jako zakres liczbowy.
Przykład
- mermaid.grammar_quadrant_example_x_axis_min_max_use
- mermaid.grammar_quadrant_example_x_axis_title_text
Oś y
Oś y służy do reprezentowania zakresu liczbowego; nie może mieć wartości kategorycznych.
Przykład
- y-axis title min --> max
- Dodaje tylko tytuł; zakres zostanie wygenerowany automatycznie na podstawie danych
Wykres liniowy
Wykres liniowy zapewnia możliwość graficznego przedstawienia linii.
Przykład
- mermaid.grammar_quadrant_example_line_2_3_valide
- mermaid.grammar_quadrant_example_line_series_2_3_valide
Wykres słupkowy
Wykres słupkowy umożliwia graficzne wyświetlanie słupków.
Przykład
- mermaid.grammar_quadrant_example_bar_2_3_valide
- mermaid.grammar_quadrant_example_bar_series_2_3_valide
Prosty przykład
Jedynymi dwoma wymaganymi elementami są nazwa wykresu xychart i zestaw danych. Dzięki temu będziesz mógł narysować wykres za pomocą prostej konfiguracji.
Kopiuj
Osadź
xychart-beta
line [+1.3, .6, 2.4, -.34]
Konfiguracja diagramu
| Parametr | Opis | Wartość domyślna |
|---|---|---|
| width | Szerokość diagramu | 700 |
| height | Wysokość diagramu | 500 |
| titlePadding | Górny i dolny margines wewnętrzny tytułu | 10 |
| titleFontSize | Rozmiar czcionki tytułu | 20 |
| showTitle | Czy tytuł ma być wyświetlany | true |
| xAxis | Konfiguracja osi x | AxisConfig |
| yAxis | Konfiguracja osi y | AxisConfig |
| plotReservedSpacePercent | Minimalny procentowy udział miejsca zajmowanego przez poszczególne figury na diagramie | 50 |
| showDataLabel | Czy wyświetlać odpowiednią wartość wewnątrz słupka | false |
AxisConfig
| Parametr | Opis | Wartość domyślna |
|---|---|---|
| showLabel | Czy wyświetlać etykietę osi lub wartość podziałki | true |
| labelFontSize | Rozmiar czcionki etykiety do narysowania | 14 |
| labelPadding | Odstęp góra-dół etykiety | 5 |
| showTitle | Czy wyświetlać tytuł osi | true |
| titleFontSize | Rozmiar czcionki tytułu osi | 16 |
| titlePadding | Odstęp góra-dół tytułu osi | 5 |
| showTick | Czy wyświetlać podziałkę | true |
| tickLength | Długość podziałki | 5 |
| tickWidth | Szerokość podziałki | 2 |
| showAxisLine | Czy wyświetlać linię osi | true |
| axisLineWidth | Grubość linii osi | 2 |
Zmienne motywu diagramu
Motyw xychart znajduje się we właściwości xychart i można go dostosować za pomocą następującej składni:
Kopiuj
Osadź
---
config:
themeVariables:
xyChart:
titleColor: '#ff0000'
---
| Parametr | Opis |
|---|---|
| backgroundColor | Kolor tła całego diagramu |
| titleColor | Kolor tekstu tytułu |
| xAxisLabelColor | Kolor etykiety osi x |
| xAxisTitleColor | Kolor tytułu osi x |
| xAxisTickColor | Kolor podziałki osi x |
| xAxisLineColor | Kolor linii osi x |
| yAxisLabelColor | Kolor etykiety osi y |
| yAxisTitleColor | Kolor tytułu osi y |
| yAxisTickColor | Kolor podziałki osi y |
| yAxisLineColor | Kolor linii osi y |
| plotColorPalette | Można dostosować za pomocą następującej składni, na przykład "#f3456, #43445" |
Przykład konfiguracji i motywu
Kopiuj
Osadź
---
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]
