Wykres XY to kompleksowy komponent wizualizacji danych używany do wyświetlania wykresów liniowych i słupkowych na standardowej dwuwymiarowej siatce współrzędnych. Wprowadzony w celu zastąpienia i połączenia starszych, samodzielnych schematów wykresów, xychart-beta silnik renderujący dynamicznie przetwarza niestandardowe zestawy danych liczbowych, automatycznie skaluje odpowiednie siatki strukturalne i obsługuje wyświetlanie wielu niezależnych, nakładających się szeregów danych jednocześnie.
Podstawowa struktura składni
Każdy wykres XY zaczyna się od xychart-beta nagłówka deklaracji. Następnie konfiguruje się tablicę kategorii osi X poziomej, tytuł osi Y pionowej lub granice zakresu danych oraz co najmniej jedną jawnie zdefiniowaną serię danych do wykresu (taką jak blok line lub bar blok).
xychart-beta
title "Przykładowy wykres wydajności"
x-axis [Sty, Lut, Mar, Kwi]
y-axis "Przychód (USD)"
bar [4500, 5200, 6100, 5800]
Odwołanie do składni
Poniższa tabela rozkłada podstawowe definicje danych i klucze konfiguracji wymagane do poprawnego zbudowania wykresu XY w Mermaid.js.
| Składnik składni | Akceptowane formaty | Opis i zasady użytkowania |
|---|---|---|
| Deklaracja | Słowo kluczowe | Inicjuje obszar roboczy wykresu w układzie 2D. Należy użyć dokładnie xychart-beta bloku ciągu znaków. |
| Tytuł | Ciąg znaków w cudzysłowach | Opcjonalny globalny nagłówek wyświetlany wyśrodkowany bezpośrednio nad siatką wykresu. |
| Konfiguracja osi X | Lista w nawiasach / Zakres | Określa etykiety skali poziomej. Akceptuje ciągi tekstowe kategoryczne w nawiasach[A, B, C]lub zakresy punktów numerycznych[100 --> 500]. |
| Konfiguracja osi Y | Ciąg tytułu / Granice skali | Ustawia parametry skali pionowej. Może to być po prostu ciąg tytułu osi, lub dostosowane do ograniczenia zakresów wartości dolnych/górnych przy użyciu"Tytuł" 0 --> 100. |
| Seria wykresu słupkowego | Tablica numeryczna | Renderuje zestawy danych jako pionowe słupki. Liczba elementów w tablicy danych musi dokładnie odpowiadać długości kategorii osi X. |
| Seria wykresu liniowego | Tablica numeryczna | Renderuje zestawy danych jako ciągłe linie łączące punkty danych na przestrzeni siatki. |
Zaawansowana personalizacja danych (dyrektywy)
Możesz precyzyjnie dopasować wygląd wizualny obszaru wykresu, wstawiając blok konfiguracji frontmatter na samym początku fragmentu kodu dokumentu. Dzięki temu masz pełną kontrolę nad układem, kolorami szesnastkowymi, grubością linii serii wykresu oraz widocznością siatki.
Macierz atrybutów konfiguracji wykresu XY
| Klucz konfiguracji właściwości | Opcje wartości | Wynik wizualny |
|---|---|---|
showLine |
true | false |
Włącza lub wyłącza wyświetlanie linii siatki osi strukturalnej na tle współrzędnych. |
chartWidth |
Liczba całkowita (piksele) | Ustawia stałą szerokość układu płótna ograniczającego systemu siatki. |
wysokoscWykresu |
Liczba całkowita (piksele) | Ustawia stałą wysokość układu płótna ograniczającego systemu siatki. |
zmienneTematu.xyWykres |
Tablice mapowania kolorów | Wstrzykuje jawne bloki kolorów w formacie szesnastkowym (np. kolorTla, kolorTytulu, lub niestandardowe sloty listy kolorów paletaKolorowWykresu) do Twoich wykresów. |
Szczegółowy projekt z rzeczywistego świata: porównanie techniczne wieloseryjne
Ten kompleksowy projekt śledzi przeglądy wydajności infrastruktury. Wykorzystuje niestandardowy dyrektywę konfiguracji w celu ustalenia rozmiarów płótna, pokazania ścieżek linii siatki tła oraz wstrzyknięcia jawnej palety kolorów w formacie szesnastkowym. Mapuje cztery różne kwartalne fazy, renderując je jako połączony wykres wizualny (wykresy słupkowe i liniowe nałożone na siebie).
---
config:
xychart:
szerokoscWykresu: 700
wysokoscWykresu: 400
pokazLinie: true
themeVariables:
xychart:
kolorTytulu: "#0072B1"
paletaKolorowWykresu: "#0072B1, #E06000"
---
xychart-beta
tytul "Metryki zasobów vs wykonania Q1-Q4"
ośX ["Kwartał 1", "Kwartał 2", "Kwartał 3", "Kwartał 4"]
ośY "Jednostki metryk wydajności" 0 --> 100
slupki [45, 65, 80, 95]
linia [55, 60, 72, 88]
Wskazówka składni: Gdy nakładamy wiele wykresów danych (np. uruchamiając zestaw danych slupki i zestaw danych linia w tym samym układzie płótna), silnik renderujący będzie stosować je lub rysować je kolejno w kolejności, w jakiej zostały wpisane w skrypcie tekstowym. Ustawiaj bloki danych celowo, aby uniknąć przycinania wizualnego na liniach płótna.
Typowe błędy składni i ograniczenia systemu
Podczas kompilowania ścieżek macierzy wymiarów, kilka subtelnych błędów konfiguracji może zakłócić obliczenia współrzędnych. Pamiętaj o tych parametrach diagnostycznych:
- Niezgodność długości danych: Każdy pojedynczy
slupkilubliniatablica serii danych *musi* zawierać dokładnie tyle samo elementów, ile określono w twoimoś Xparametr listy. Posiadanie 4 kategorii na osi X, ale podanie listy danych z 5 liczbami całkowitymi całkowicie zepsuje kompilację wykresu. - Granice cudzysłowów: Podczas określania kategorii wewnątrz nawiasów listy osi, bloki tekstowe zawierające spacje lub znaki specjalne muszą być dokładnie otoczone podwójnymi cudzysłowami (np.
["Faza 1", "Faza 2"]). - Granice współrzędnych numerycznych: Podczas ustawiania ręcznych zakresów na skali osi (np.
0 --> 500), musisz jawnie użyć dwóch myślników, a następnie znaku większości (-->). Pominięcie myślnika lub rozdzielenie znaków operatora spacjami spowoduje błąd przetwarzania układu. - Dodatnie liczby całkowite jako wagi: Wartości skali mapują się na bloki przestrzeni liniowej. Upewnij się, że przekazywane wartości do serii nie zawierają nieescaped elementów znakowych ani pustych null-ów parametrów wewnątrz tablic.